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.
