index.html
Code: Select all
<div class="app-search-box col">
<input type="text" class="form-control" id="live" autocomplete="off" placeholder="Search customer ..." />
</div><!--//app-search-box-->
<div class="app-wrapper">
<div class="app-content pt-3 p-md-3 p-lg-4">
<div class="container-xl">
<h1 class="app-page-title">Portal</h1>
<div class="app-card shadow-sm mb-4 border-left-decoration">
<div class="inner">
<div class="app-card-body p-4">
<div class="row gx-5 gy-3">
<div class="col-12 col-lg-12">
<div>Customer details are displayed here. </div>
<div class="results" id="searchresults"> </div>
</div><!--//col-->
</div><!--//row-->
</div><!--//app-card-body-->
</div><!--//inner-->
</div><!--//app-card-->
</div><!--//app-wrapper-->
Code: Select all
$(document).ready(function(){
$("#live").keyup(function(){
var input = $(this).val();
if(input !==''){
$.ajax({
url: "functions/search.php",
method: "POST",
data:{input:input},
success:function(data){
$("#searchresults").html(data);
}
});
}else{
$("#searchresults").css("display", "none");
}
})
})
functions/search.php
Code: Select all
<?php
include '../../config.php';
if(isset($_POST['input'])){
$input = $_POST['input'];
$live_query = "SELECT * FROM customers WHERE TIN LIKE '$input%'";
$live_query_result = mysqli_query($conn, $live_query);
$number_of_results= mysqli_num_rows($live_query_result);
if($number_of_results>0){?>
<table class="table table-bordered table-striped mt-4">
<thead>
<tr>
<th><center>#</center></th>
<th><center>NAME</center></th>
<th><center>EMAIL</center></th>
<th><center>CODE</center></th>
<th><center>REPRESENTATIVE</center></th>
<th><center>CREDENTIALS</center></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($live_query_result)){
$ID=$row['ID'];
$name=$row['Name'];
$email = $row['Email'];
$customer_code=$row['Customer_Code'];
$rep =$row['Representative'];
$credentials = 'Active';
echo '<tr>
<td><center>'.$ID.'</td>
<td><center>'.$name.' </center></td>
<td><center>'.$email.'</center></td>
<td><center>'.$customer_code.'</center></td>
<td><center>'.$rep.'</center></td>
<td><center><span class="badge bg-success">'.$credentials.'</span></center></td>
</tr>';
}
?>
</tbody>
</table>
<nav class="app-pagination mt-5">
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">Prev</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav><!--//app-pagination-->
<?php
}else{
echo "<h6 class='text-danger text-center mt-3'>No customers found!</h6>";
}
}
?>