<style> #myInput { 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="myInput" name="patient_name" onkeyup="myFunction()" onBlur="checkPatient()" autocomplete="off" style= "text-transform:uppercase;" onChange="hideResultTable();" placeholder="Visitor Name" title="Enter Visitor Name"> <div id="searchResultDiv" class="dropdown-content"> <table id="myTable" class="table table-bordered table-hover"> <thead> <tr> <th style="width: 25%;">Name</th> <th style="width: 25%;">Father Name</th> <th style="width: 25%;">Phone</th> <th style="width: 25%;">Id Document</th> </tr> </thead> <tbody> <?php $query = "select id, patient_name, father_name, personal_phone, concat(doc_type,':', doc_no) doc from visitor_patient_master order by patient_name "; //echo $query; if (! $result = @mysqli_query($conn,$query)) { die(mysqli_error($conn)); } else { while ($row = @mysqli_fetch_array($result)) { @extract($row); ?> <tr onClick="selectRow(<?php echo $row['id']?>)" > <td><?php echo $row['patient_name']?></td> <td><?php echo $row['father_name']?></td> <td><?php echo $row['personal_phone']?></td> <td><?php echo $row['doc']?></td> </tr> <?php } } ?> </tbody> </table> </div> </div> <script> function selectRow(patient_id){ $("#myTable").hide(); $("#searchResultDiv").hide(); $.ajax({ type: 'POST', url: 'select_visitor_patient.php', data:{id:patient_id}, dataType:'json', success: function(data){ $("#patient_id").val(data.id) $("#flex_opd_id").val(data.id) $("#update_button").show(); $("#save_button").hide(); $("#father_name").val(data.father_name); $("#myInput").val(data.patient_name); $('input:radio[id=gender][value='+data.gender+']').prop('checked', true); $("#emp_code").val(data.emp_code); $("#blood_group").val(data.blood_group); $("#phone_no").val(data.primary_phone); $("#doc_type").val(data.doc_type); $("#aadhar_no").val(data.doc_no); $("#address").val(data.address); $("#dob").val(myDateFormater(data.dob)) // $("#emergency_contact").val(myDateFormater(data.emergency_contact)) $("#visitor_company").val(data.visitor_company); $("#emp_designation").val(data.designation_id) $("#personal_phone").val(data.personal_phone); $("#visiting_patient_id").val(data.visiting_patient_id); $("#emergency_contact").val(data.emergency_contact); // $("#dob").val(myDateFormater(data.dob)) $('#visitor_company').select2(); //checkPatient(); },error : function(data) { BootstrapDialog.alert('Error In Fetching Patient Record'); } }); } function hideResultTable(){ $("#myTable").toggle("show"); $("#searchResultDiv").toggle("show"); } function checkPatient(){ //if($("#patient_id").val()==''){ // $("#fieldsetBtn").prop("disabled", true); //}else{ //$("#fieldsetBtn").prop("disabled", false); //} } function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); 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(); } }); </script>