How To Use Ajax Live Data Search using Jquery PHP MySql
How To Use Ajax Live Data Search using Jquery PHP MySql
1) demo.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webslesson Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<br />
<h2 align="center">Ajax Live Data Search using Jquery PHP MySql</h2><br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
<br />
<div id="result"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"data.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
2) data.php )
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = mysqli_connect($servername, $username, $password, $dbname);
$_SESSION['conn']=$conn;
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}else{
//echo "connected";
}
if(isset($_POST["query"])){
$search = mysqli_real_escape_string($conn, $_POST["query"]);
$sql="SELECT * FROM testing WHERE fname LIKE '%$search%'";
}else{
$sql="SELECT * FROM testing";
}
$res=mysqli_query($conn,$sql);
if(mysqli_num_rows($res) >0){
?>
<table class="table">
<tr>
<th>enid</th>
<th>fname</th>
<th>email</th>
<th>phone</th>
<th>address</th>
</tr>
<?php
while($row=mysqli_fetch_assoc($res)){
?>
<tr>
<td><?=$row["fname"]; ?></td>
<td><?=$row["email"]; ?></td>
<td><?=$row["phone"]; ?></td>
<td><?=$row['address']; ?></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
No comments