How to create PHP live search with Ajax is the question, lot of PHP beginners are searching every day. I don’t have specific data that how many searchers achieving their target. But I hope after reading this post you may be able to create PHP live search engine for your website. Before thoroughly reading this post I recommend you to see live results of this coding.
Devicesprice.com using this coding to facilitate it’s visitors with searching facility. If you have visited the above website, now you should read the post to the end to learn this coding, lets’s start.
Create a new file in PHP, save it as livesearch.php and copy the code below to paste into it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webslesson Demo - Ajax Live Data Search using Jquery PHP MySql</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">
<h2 align="center">Enter Mode No Plez</h2><br />
<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 id="result"></div>
</div>
</body></html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"livesearch_results-res.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>Now create another file in PHP, save it as livesearch_results.php and copy the code below to paste into it.
<?php
$con = mysqli_connect("localhost", "---", "---", "---");
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($con, $_POST["query"]);
$query = "SELECT * FROM devices_samsung WHERE model LIKE '%".$search."%'
";
}
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) > 0)
{
$output = "<div class=table-responsive>
<table class=table table bordered>";
while($row = mysqli_fetch_array($result))
{
$output .= '<tr><td>' . $row["model"] . '</td>/tr>';
}
echo $output;
}
?>Description of livesearch.php:
These are the libraries for ajax and bootstrap
<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" />Then some coding to style input field.
<div class="container">
<h2 align="center">Enter Mode No Plez</h2><br />
<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 id="result"></div>
</div>Then Ajax script to load data of search query live when someone is typing input field.
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"livesearch_results.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>Description of livesearch_results.php:
First of all change your mysql database credentials such as localhost, database name, database username, database password whatever you have.
$con = mysqli_connect("localhost", "---", "---", "---");Then we have applied if condition to check what query is coming from input form, and select data from mysql according to that search query and applied limit for 10 results. You should change database table name according to your database table. I have used table_name for you in this example.
$output = '';
if(isset($_POST["query"]))
{
$search = mysqli_real_escape_string($con, $_POST["query"]);
$query = "SELECT * FROM table_name WHERE model LIKE '%".$search."%' limit 10";
}Then we have applied another if condition to check number of rows search result. If results are grater than zero, they would be published.
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) > 0)
{Then we have start html table to show results.
$output .= '<div class="table-responsive">
<table class="table table bordered">And at the end we have applied while condition to check results from start to end.
while($row = mysqli_fetch_array($result))
{
$output .= '<tr><td>' . $row["model"] . '</td>/tr>';
}
echo $output;
}
?>I hope you like this tutorial, if you have any kind of query, question in your mind, don’t feel me to away from you. Just leave a comment to resolve your query.
Dear friends if you know how to create a website in WordPress don’t worry about it. I have already written a tutorial about it. just read it to get more, How to Create a Website with WordPress