index.php file:
<html>
<head>
<title>Search Bar and Filtering</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// for search bar
$(".sbar").on("keyup", function(){
var sbar = $(this).val();
$.ajax({
url:"search.php",
type:"POST",
data:{sbar:sbar},
success:function(data){
$("#show").html(data);
}
})
})
//end search bar code
});
// start filtering
function getresult(){
$.ajax({
url:"search.php",
type:"POST",
success:function(data){
$("#show").html(data);
}
})
}
getresult();
//end filtering
</script>
<body>
<input type="text" class = "sbar" style="width:320px; height:20px;" placeholder = "Search your data here!">
<div id ="show"></div>
</body>
</head>
</html>
search.php file:
<?php
//database connection
$connect = mysqli_connect("localhost","root","","mysearchdata");
$sbar = $_POST['sbar'];
$sql = mysqli_query($connect,"select * from datas where mydatas LIKE '%$sbar%'");
while($result = mysqli_fetch_array($sql)){
?>
<p><?php echo $result['mydatas']; ?></p>
<?php
}
?>
