<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="Kitchen 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='kitchen' 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); die(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(kitchen_id) { $("#myTable").hide(); $("#searchResultDiv").hide(); $.ajax({ type: 'POST', url: 'select_canteen.php', data: { 'key_val': kitchen_id, key: 'id' }, dataType: 'json', success: function(data) { $("#kitchen_id").val(data.id) $("#flex_kitchen_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>