ESH/select_staff_list.php

<style>
#staff_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="staff_name" name="staff_name" onkeyup="myFunction()" onchange="checkPatient()"
        autocomplete="off" style="text-transform:uppercase;" onChange="hideResultTable();"
        placeholder="Select Staff" title="Enter Canteen Location">
        <input type="hidden" name="staff_id" id="staff_id">
    <div id="searchResultDiv" class="dropdown-content">
        <table id="myTable" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th style="width: 30%;">STAFF NAME</th>
                    <th style="width: 15%;">EMP CODE</th>


                </tr>
            </thead>
            <tbody>

                <?php 
                $ohc =$_SESSION['current_ohcttype'];
                $query = "SELECT * from staff_master WHERE ohc_type =$ohc ";
                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['staff_id'] ?>)">

                    <td style="font-family: verdana;"><?php  echo  $row['staff_name'] ?></td>
                    <td style="font-family: verdana;"><?php  echo  $row['emp_code'] ?></td>

                </tr>
                <?php 

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

    $("#myTable").hide();
    $("#searchResultDiv").hide();
    $.ajax({
        type: 'POST',
        url: 'select_Staff.php',
        data: {
            'key_val': staff_id,
            key: 'id'
        },
        dataType: 'json',
        success: function(data) {
            // $("#staff_id").val(data.staff_name);
            // console.log(data.staff_name + " Name " );
            $("#staff_id").val(data.staff_id);
            $("#staff_name").val(data.staff_name);
        },
        error: function(data) {
            BootstrapDialog.alert('Error In Fetching Patient Record');
        }
    });



}

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


}


function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("staff_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";
            }
        }
    }
}
$(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 ($("#staff_name").val() == '') {
        checkPatient();
    }
});
</script>