I found this code example in ajax that shows all the data of a table and I want to place a search engine, here my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">Auto Load More Data on Page Scroll with Jquery & PHP</a></h2>
<input type="text" id="busqueda" placeholder="Introduzca el nombre" size="50" />
<br />
<div id="load_data"></div>
<div id="load_data_message"></div>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
consulta = $("#busqueda").val();
var limit = 7;
var start = 0;
var action = 'inactive';
function load_country_data(limit, start,"b="+consulta)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{limit:limit, start:start},
cache:false,
success:function(data)
{
$('#load_data').append(data);
if(data == '')
{
$('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
action = 'active';
}
else
{
$('#load_data_message').html("<button type='button' class='btn btn-warning'>Please Wait....</button>");
action = "inactive";
}
}
});
}
if(action == 'inactive')
{
action = 'active';
load_country_data(limit, start);
}
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
action = 'active';
start = start + limit;
setTimeout(function(){
load_country_data(limit, start);
}, 1000);
}
});
});
</script>
Here the PHP
<?php
$b = $_POST['b'];
if(isset($_POST["limit"], $_POST["start"]))
{
$connect = mysqli_connect("localhost", "root", "******", "tel");
$query = "SELECT * FROM tel WHERE nombre LIKE '%".$b."%' ORDER BY id DESC LIMIT ".$_POST["start"].", ".$_POST["limit"]."";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
echo '
<h3>'.$row["nombre"].'</h3>
<p>'.$row["tel"].'</p>
<p class="text-muted" align="center">By - '.$row["id"].'</p>
<hr />
';
}
}
?>
I would like you to show all available data but also show when I write.