<style>
#canteen_location {
    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="canteen_location" name="canteen_location" onkeyup="myFunction()" onchange="checkPatient()"
        autocomplete="off" style="text-transform:uppercase;" onChange="hideResultTable();"
        placeholder="Canteen location" title="Enter Canteen Location">
    <div id="searchResultDiv" class="dropdown-content">
        <table id="myTable" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th style="width: 30%;">Canteen Location</th>
                    <th style="width: 15%;">Canteen code</th>


                </tr>
            </thead>
            <tbody>

                <?php 
                $query = "SELECT * from canteen_master where type='canteen' order by canteen_location";
                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['canteen_location'] ?></td>
                    <td style="font-family: verdana;"><?php  echo  $row['canteen_code'] ?></td>

                </tr>
                <?php 

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

    $("#myTable").hide();
    $("#searchResultDiv").hide();
    $.ajax({
        type: 'POST',
        url: 'select_canteen.php',
        data: {
            'key_val': canteen_id,
            key: 'id'
        },
        dataType: 'json',
        success: function(data) {
            $("#canteen_id").val(data.id)
            $("#flex_canteen_id").val(data.id)
            $("#canteen_code").val(data.canteen_code);
            $("#canteen_location").val(data.canteen_location);
            checkPatient();
        },
        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("canteen_location");
    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 ($("#canteen_location").val() == '') {
        checkPatient();
    }
});
</script>