nhance-enrollment/app/Views/dms_search.php

<style>
.col-12 {

    max-width: 98% !important;
}

.autocomplete-suggestions {
      border: 1px solid #d4d4d4;
      max-height: 150px;
      overflow-y: auto;
      position: absolute;
      background-color: white;
      width: inherit;
      z-index: 1;
    }
    .autocomplete-suggestion {
      padding: 8px;
      cursor: pointer;
    }
    .autocomplete-suggestion:hover {
      background-color: #e9e9e9;
    }

</style>

<div class="row">
    <div class="col-12" style="margin-top: -12px;">
        <div id="accordion" class="mb-3">
            <div class="card mb-1">
                <h5 class="m-1">
                    <a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
                        aria-expanded="true">
                        <i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
                    </a>
                </h5>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <div class="form-group">
                            <form method="post" action="<?= base_url("/dmsSearch");?>" id='dms_search_form'>
                            <div class="form-row">

                                <div class="form-group col-md-2">
                                    <label for="customer">Customer</label>
                                    <!-- <div style="position:relative;"> -->
                                        <input type="text" class="form-control" id="customer" placeholder="Enter customer name">
                                        <input type="hidden" name="customer_id" class="form-control" id="customer_id" placeholder="Enter customer name">
                                        <div id="customer_suggestions" class="autocomplete-suggestions" style="display:none;"></div>
                                    <!-- </div> -->
                                </div>

                                 <div class="form-group col-md-2">
                                    <label for="customer">Customer document name</label>
                                    <!-- <div style="position:relative;"> -->
                                        <input type="text" name="cus_doc_name" class="form-control" id="cus_doc_name" placeholder="Enter customer doc name ">
                                    <!-- </div> -->
                                </div>
                                <div class="form-group col-md-1" style="text-align: center;">
                                    OR
                                </div>
                                <div class="form-group col-md-3">
                                    <label for="customer">Policy</label>
                                    <!-- <div style="position:relative;"> -->
                                        <input type="text" class="form-control" id="policy" placeholder="Enter policy no">
                                        <input type="hidden" name="policy_id" class="form-control" id="policy_id" placeholder="Enter policy no">
                                        <div id="policy_suggestions" class="autocomplete-suggestions" style="display:none;"></div>
                                    <!-- </div> -->
                                </div>

                                 <div class="form-group col-md-3">
                                    <label for="customer">Policy document name</label>
                                    <!-- <div style="position:relative;"> -->
                                        <input type="text" name="policy_doc_name" class="form-control" id="policy_doc_name" placeholder="Enter policy doc name ">
                                    <!-- </div> -->
                                </div>
                            </div>

                            <div class="form-group text-right m-b-0">
                                <button type="button" class="btn btn-secondary" id="clear-filters">Clear</button>
                                <input type="submit" class="btn btn-primary waves-effect waves-light" id="get-emp-list" onclick="fetchFileList(event);" value="submit">                            
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- end page title -->
<div class="col-12" id="second_page">
    <div class="card">
        <div class="card-body">
            <div class="row" style="padding-bottom: 10px;">
                <div class="col-6" style="align-self: center;">
                    <h4 style="position: relative;">File search result</h4>
                </div>

            </div>
            <div class="table-responsive" style="overflow-x: auto;">
            <table id="scroll-horizontal-datatable" class="table w-100">
                <thead class="bg-light">
                    <tr>
                        <th>S.No</th>
                        <th>Doc name</th>
                        <th>File name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (isset($files)) { ?>
                        <?php foreach($files as $index => $row){ ?>
                        <tr>
                            <td><?= $index + 1 ?></td>
                            <td><?php echo $row['doc_name']; ?></td>
                            <td><?php echo $row['file_name']; ?></td>
                            <td>
                                <a id="download_1" 
                                   data-id="1" 
                                   class="fa fa-download" 
                                   style="font-size: 18px;" 
                                   target="_blank"
                                   href="<?= base_url("/downloadGdriveFile?client_id=" . $row['client_id'] . "&file_type=" . $row['file_type'] . "&file_name=" . $row['file_name']."&client_policy_id=".$row['client_policy_id']); ?>"> 
                                </a>
                            </td>

                        </tr>
                        <?php } ?>
                    <?php } ?>
                </tbody>
            </table>

                <div>
                </div>
            </div>
        </div><!-- end col -->
    </div>
</div>


<script>
 
$(document).ready(function() {
    // $('#client_id').select2();
    // $('#insurer_id').select2();
    // $('#policy_type_id').select2();
     const customer_suggestions = <?php echo json_encode($customers); ?>;
     const policy_suggestions = <?php echo json_encode($policies); ?>;
     showSuggestions('customer','customer_suggestions','customer_id',customer_suggestions);
     showSuggestions('policy','policy_suggestions','policy_id',policy_suggestions);

})

// Datatable document ready
$(document).ready(function() {

var ticketsTable = $('#scroll-horizontal-datatable');

if (ticketsTable.length) {
    ticketsTable.DataTable({
        scrollX: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search..."
        },
        paging: true, // Enable pagination
        pageLength: 25, // Set default number of rows per page (optional)
    });
} else {
    console.error("Table not found.");
}
});

function showSuggestions(inputID, suggestionBoxID,hiddenInputID,suggestions) {
   
    // console.log('showSuggestions');
    // console.log(suggestions);return;
    const input = document.getElementById(inputID);
    const suggestionBox = document.getElementById(suggestionBoxID);
    const hiddenInput = document.getElementById(hiddenInputID);

    input.addEventListener('input', function() {
        const value = this.value.toLowerCase();
        suggestionBox.innerHTML = ''; // Clear previous suggestions

        if (value) {
            const filteredSuggestions = suggestions.filter(item =>
                item.display_value.toLowerCase().includes(value)
            );
            // console.log(filteredSuggestions);
            filteredSuggestions.forEach(suggestion => {
                const suggestionItem = document.createElement('div');
                suggestionItem.textContent = suggestion.display_value;
                suggestionItem.classList.add('autocomplete-suggestion');

                suggestionItem.addEventListener('click', function() {
                    input.value = suggestion.display_value;  // Display value in input
                    hiddenInput.value = suggestion.id;        // Store id in hidden input
                    suggestionBox.innerHTML = '';             // Clear suggestions after selecting
                    suggestionBox.style.display = 'none';
                });

                suggestionBox.appendChild(suggestionItem);
                suggestionBox.style.display = 'block';
            });
        }
    });
}


function fetchFileList(event)
{
    event.preventDefault();

    var customer = document.getElementById('customer').value;
    var customer_id = document.getElementById('customer_id').value;
    var policy = document.getElementById('policy').value;
    var policy_id = document.getElementById('policy_id').value;
    var cus_doc_name = document.getElementById('cus_doc_name').value;
    var policy_doc_name = document.getElementById('policy_doc_name').value;

    if(customer == '' && cus_doc_name != '')
    {
        alert('choose customer');return false;
    }

    if(policy == '' && policy_doc_name != '')
    {
        alert('choose policy');return false;
    }

    if(policy == '' && customer == '')
    {
        alert('choose customer or policy');return false;
    }
    console.log('called');
    let customEvent = new CustomEvent('fetchFileListCustomEvent');
    $('#dms_search_form').submit();

}



</script>