ESH/visitors_patient_search_list.php

<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)) {
    exit(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>