ESH/patient_search_list_ext.php

<style>
#myInput {
  background-image: url('images/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* 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 8px 35px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

.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()" autocomplete="off"  style= "text-transform:uppercase;" onChange="hideResultTable();" placeholder="Patient Name" title="Enter Patient Name">
	<div id="searchResultDiv" class="dropdown-content">
		<table id="myTable" class="table table-bordered table-hover">
			<thead>
			<tr>
				<th style="width: 20%;">Name</th>
				<th style="width: 20%;">Father Name</th>
				<th style="width: 20%;">Emp Code</th>
				<th style="width: 20%;">Phone</th>
				<th style="width: 20%;">Action</th>

			</tr>
			</thead>
			<tbody>

<?php 
$query = "select id, patient_name, father_name, emp_code, primary_phone  from 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['emp_code']?></td>
				<td><?php  echo $row['primary_phone']?></td>
				<td>
				<select class="form-control">
					<option value=""></option>
				</select>
				</td>
			</tr>
<?php 

}
}
?>
</tbody>
</table>
	</div>
</div>
<script>
function selectRow(patient_id){
	//alert(patient_id)
      $("#myTable").hide();
	 $("#searchResultDiv").hide();
	   $.ajax({
         type: 'POST',
         url: 'select_patient.php',
         data:{'key_val':patient_id,key:'id'},
         dataType:'json',
         success: function(data){
            $("#patient_id").val(data.id)
             $("#update_button").show();
             $("#save_button").hide();
             $("#father_name").val(data.father_name);
             $("#myInput").val(data.patient_name);
        if(data.patient_cat_id==1){
              $("#employee_div").show();
             }else{
            	 $("#employee_div").hide();
             }
             if(data.emp_cat_id==2){
            	  $("#emp_sub_category_div").show();
             }else{
            	  $("#emp_sub_category_div").hide();
             }
            // $("#gender").val(data.gender);
            
            
            $('input:radio[id=gender][value='+data.gender+']').prop('checked', true);
             
             
             $("#patient_category").val(data.patient_cat_id);
             $("#emp_code").val(data.emp_code);
             $("#emp_cadre").val(data.emp_cadre);
             $("#dept").val(data.dept_id);
             $("#emp_sub_cat").val(data.emp_sub_cat_id);
             $("#employer_contractor").val(data.employer_contractor_id);
            
             $("#blood_group").val(data.blood_group);
             $("#emp_cat").val(data.emp_cat_id);
             $("#has_first_aid").val(data.is_first_aid);
             $("#phone_no").val(data.primary_phone);
             $("#aadhar_no").val(data.aadhar_no);
             $("#village").val(data.village);
             $("#post").val(data.post);
             $("#ps").val(data.ps);
             $("#tehsil").val(data.tehsil);
             $("#district").val(data.district);
             $("#state").val(data.state);
             $("#pin_code").val(data.pin_code);
             $("#dob").val(myDateFormater(data.dob))

           
             
             
             
             
             
             
             
             
             
           
		},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("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( elem ).length === 0 ) {
        $( elem ).hide();
        $("#myTable").hide();
   	 $("#searchResultDiv").hide();
    }
});

$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $( elem ).hide();
        $("#myTable").hide();
   	 $("#searchResultDiv").hide();
    }
});
</script>