ESH/patient_search_list_amb.php

<style>
#patient_name {
    background-image: url('images/searchicon.png');
    /* Add a search icon to input */
    background-position: 5px 7px;
    /* Position the search icon */
    background-repeat: no-repeat;
    /* Do not repeat the icon image */
    width: 100%;
    /* Full-width */
    font-size: 14px;
    /* Increase font-size */
    padding: 8px 15px 10px 30px;
    /* Add some padding */
    border: 1px solid #ddd;
    /* Add a grey border */
}

.dropdown {
    position: relative;
    width: 100%;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    margin-top: -12px;
    width: 100%;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

#searchResultDiv {
    overflow: scroll;
    display: none;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}
</style>
<div class="dropdown">
    <input type="text" id="patient_name" name="patient_name" onkeyup="myFunction()" onchange="checkPatient()"
        style="height:28px;border-radius: 5px; " autocomplete="off" style="text-transform:uppercase;"
        onChange="hideResultTable();" placeholder="Patient Name" title="Enter Patient Name">
    <div id="searchResultDiv" class="dropdown-content">
        <table id="myTable" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th style="width: 30%;">Patient Name</th>
                    <th style="width: 15%;">Father Name</th>
                    <th style="width: 10%;">Phone</th>
                    <!-- <th style="width: 10%;">Base OHC</th> -->
                    <th style="width: 20%;">Employer/Contractor</th>

                </tr>
            </thead>
            <tbody>

                <?php 
                $query = "select id, patient_name, father_name, emp_code, primary_phone,employer_contractor_id  from patient_master order by patient_name ";
                error_log("search query" . $query);
                if (!$result = @mysqli_query($conn, $query)) {
                    error_log("error pulling patient info:".mysqli_error($conn)."search query" . $query);
                    exit(mysqli_error($conn));
                } else {
                    while ($row = @mysqli_fetch_array($result)) {
                        @extract($row);

                ?>
                <tr onClick="selectRow(<?php  echo  $row['id'] ?>)">

                    <td style="font-family: verdana;"><?php  echo  $row['emp_code'] ?> -
                        <?php  echo  $row['patient_name'] ?></td>
                    <td style="font-family: verdana;"><?php  echo  $row['father_name'] ?></td>
                    <td style="font-family: verdana;"><?php  echo  $row['primary_phone'] ?></td>
                    <!-- <td style="font-family: verdana;"><?php  echo  getFieldFromTable("ohc_type_name", "ohc_type", "ohc_type_id", $row['ohc_type_id']) ?></td> -->
                    <td style="font-family: verdana;">
                        <?php  echo  getFieldFromTable("employer_contractor_name", "employer_contractor", "id", $row['employer_contractor_id']) ?>
                    </td>
                </tr>
                <?php 

                    }
                }
                ?>
            </tbody>
        </table>
    </div>
</div>
<script>
function selectRow(patient_id) {

    $("#myTable").hide();
    $("#searchResultDiv").hide();
    $.ajax({
        type: 'POST',
        url: 'select_patient.php',
        data: {
            'key_val': patient_id,
            key: 'id'
        },
        dataType: 'json',
        success: function(data) {
            $("#patient_id").val(data.id)
            $("#save_button").show();
            $("#patient_name").val(data.patient_name);


            $("#dependent_icon").show();
        },
        error: function(data) {
            BootstrapDialog.alert('Error In Fetching Patient Record');
        }
    });



}

function hideResultTable() {
    $("#myTable").toggle("show");
    $("#searchResultDiv").toggle("show");


}

function calcAge(dateString) {
    var birthday = +new Date(dateString);
    return ~~((Date.now() - birthday) / (31557600000));
}

function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("patient_name");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    $("#myTable").show();
    $("#searchResultDiv").show();
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
    $("#dependent_list").hide();
}
$(document).on('click', function(e) {
    if ($(e.target).closest(window.element).length === 0) {
        $(window.element).hide();
        $("#myTable").hide();
        $("#searchResultDiv").hide();
    }
});

$(document).on('keydown', function(e) {
    if (e.keyCode === 27) { // ES
        $(elem).hide();
        $("#myTable").hide();
        $("#searchResultDiv").hide();
    }
    if ($("#patient_name").val() == '') {
        checkPatient();
    }
});
</script>