Live search in PHP and Mysql using Jquery

Live search in PHP and Mysql using Jquery

This tutorials is to know how to integrate live search in php and MySQL using jquery. Searching is one of the most required feature in web sites and if it will be live searching it will show you fast result on page. In this tutorial we will create a database and a table insert records and start searching in it.

This is a very simple script which has 2 files. One is an HTML (index.php) file with a Search input box and the second is a PHP (do_search.php) file that has a regular MySQL connect(db.php) and a select statement to get the data from database. This script also has a Loading message shown while the data is being pulled from MySQL. Please note that live search might use more resources from your server. It might result in server overload / slowness if your infrastructure is limited.

Step1 : Setup your database and table in MySQL
Before you run this script make sure you have created a database and table in MySQL. Below is the sample sql command to create a database, table, and insert some dummy rows.

--
-- Table structure for table `live_search`
--

CREATE TABLE `live_search` (
  `id` int(10) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `live_search`
--

INSERT INTO `live_search` (`id`, `name`, `email`, `date`) VALUES
(1, 'Raja', 'Raja@developerdesks.com', '2016-08-29 05:34:36'),
(2, 'Ragav', 'Ragav@developerdesks.com', '2016-08-29 05:34:36'),
(3, 'Sangeet kumar', 'sangeet@developerdesks.com', '2016-08-29 05:35:31'),
(4, 'Tharun', 'Tharun@developerdesks.com', '2016-08-29 05:35:31'),
(5, 'Kabi', 'kabi@developerdesks.com', '2016-08-29 05:35:33');

Step 2: Index page for search form. 
Create the live form for searching.

<div class="container">
<h1>Live search using php and mysql using jquery</h1>
	<div class="row">
		<div class="panel panel-default">
			<div class="panel-heading">
				<span>Live Search</span>
			</div>
			<div class="form-group">
				<label for="username">Username :</label>
				<input name="keysearch" value="" placeholder="name" id="keysearch" type="text" class="form-control">
				<span id="loading">Loading...</span>
			</div>
			<div id="result"></div>
		</div>
	</div>
</div>

Step 3: Creating a do search for getting data from database.
Create the mysql query for getting the data from table using “like” options.

<?php
include('db.php');
if(isset($_POST['keysearch']))
{
    $search = $_POST['keysearch'];
    $data = mysql_query("SELECT * FROM `live_search` WHERE `name` like '%$search%' order by id LIMIT 5");
    while($row = mysql_fetch_array($data))
    {
		if($data) {
        $username   = $row['name'];
        echo "<div class='show'><img src='' id='search' /><span class='name'> $username </span></div>";
    }
	else
	{ echo "No found results";}
}
}
?>

Step 4: jquery code for get the search value and pass to do_seach page. 
Using the jquery you can get the search word and pass to the next page using variable and post method.

<script>
$(document).ready(function(){
	var req = null;
	$('#keysearch').on('keyup', function(){
		var key = $('#keysearch').val();
		if (key && key.length > 2)
		{
			$('#loading').css('display', 'block');
			if (req)
				req.abort();
			req = $.ajax({
				url : 'do_search.php',
				type : 'POST',
				cache : false,
				data : {
					keysearch : key,
				},
				success : function(data)
				{
					console.log(data)
					if (data)
					{
						$('#loading').css('display', 'none');
						$("#result").html(data).show();
					}
				}
			});
		}
		else
		{
			$('#loading').css('display', 'none');
			$('#result').css('display', 'none');
		}
 
	});
});
</script>

Step 4: Add css code fro your design.

.panel-default{padding: 15px;}
.form-group{margin-top: 15px;}
.panel-heading{background-color: #40A2BE !important; color: #FFFFFF !important;}
#loading{display: none;}
#searchid
{
    width:500px;
    border:solid 1px #000;
    padding:10px;
    font-size:14px;
}
#result
{
    position:absolute;
    width:500px;
    padding:10px;
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show{font-size:20px;height: 50px;padding: 5px;}
.show:hover{background:#40A2BE;color:#FFF;cursor:pointer;}
img#search{width:50px; height:40px; float:left; margin-right:6px;}

You can now demo the script and get the live code., That’s it enjoy the code. Please subscribe.