Ajax Live Data Search using jQuery, PHP and MySQL is a very common technique used to search and filter out the records from the MySQL database without page refresh.
In this tutorial, we will show you how to create an Ajax Live Data Search using jQuery, PHP and MySQL.
First, we will create a database table to store the records.
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Next, we will create a search form with an input field and a submit button.
Now, we will create an Ajax request to send the search query to the server and get the results.
$(document).ready(function(){
$(‘#search’).keyup(function(){
var query = $(this).val();
if(query != ”)
{
$.ajax({
url:”search.php”,
method:”POST”,
data:{query:query},
success:function(data)
{
$(‘#result’).fadeIn();
$(‘#result’).html(data);
}
});
}
});
});
Finally, we will create a PHP script to fetch the records from the MySQL database and return the results.
0)
{
//loop through the results
while($row = mysqli_fetch_array($result))
{
echo “
echo “
“.$row[‘name’].”
“;
echo “
“.$row[’email’].”
“;
echo “
“;
}
}
else
{
echo “
echo “
No Results Found
“;
echo “
“;
}
?>
That’s it. Now you have a working Ajax Live Data Search using jQuery, PHP and MySQL.
Sometimes, you need to add live search functionality for populating data without loading the whole page. This tutorial shows you how you can implement Ajax live data search using a PHP mysql database. And you can use the free source code of ajax live data search using jquery php MySQL.
PHP Mysql and jquery Ajax live search from database example. In this tutorial, you will learn how to implement ajax search in PHP and MySQL database.
How to Create Live Search Box Using PHP MySQL and jQuery AJAX
Just follow the few below steps to easily implement live search in PHP MySQL using jQuery ajax from the database:
- First Create a Database Connection File
- Create an ajax search form
- Create a PHP Script for Search to DB
1. First Create a Database Connection File
In this step, you will create a file name db.php and update the below code into your file.
The below code is used to create a MySQL database connection in PHP. When we insert form data into MySQL database, there we will include this file:
<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
2. Create an ajax search form
In this step, you need to create an ajax search form and update the below code into your ajax search form.
<!DOCTYPE html>
<html>
<head>
<title>Ajax PHP MySQL Search Example | Tutsmake.com</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Search for users</h2>
<input type="text" name="search" id="search" autocomplete="off" placeholder="search user name here....">
<div id="output"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#search").keyup(function(){
var query = $(this).val();
if (query != "") {
$.ajax({
url: 'ajax-db-search.php',
method: 'POST',
data: {query:query},
success: function(data){
$('#output').html(data);
$('#output').css('display', 'block');
$("#search").focusout(function(){
$('#output').css('display', 'none');
});
$("#search").focusin(function(){
$('#output').css('display', 'block');
});
}
});
} else {
$('#output').css('display', 'none');
}
});
});
</script>
</body>
</html>
3. Create a PHP Script for Search to DB
In this step, you need to create one file name ajax-db-search.php and update the below code into your file.
The below code is to search into a MySQL database table using an Ajax PHP script:
<?php
require_once "connection.php";
if (isset($_POST['query'])) {
$query = "SELECT * FROM users WHERE name LIKE '{$_POST['query']}%' LIMIT 100";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($user = mysqli_fetch_array($result)) {
echo $user['name']."<br/>";
}
} else {
echo "<p style='color:red'>User not found...</p>";
}
}
?>
Conclusion
In this tutorial, you have learned how to implement live search in PHP with MySQL database table using PHP code.
This is a very basic and easy example of ajax search into the MySQL database using PHP code.
Recommended PHP Tutorials
If you have any questions or thoughts to share, use the comment form below to reach us.
