Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL

This tutorial shows how to create simple and attractive Ajax based search using PHP, jQuery, MySQL and Ajax.

Table Structure:

CREATE TABLE `search` (
  `id` int(11) NOT NULL auto_increment,
  `text` varchar(255) NOT NULL,
  `link` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
)

CREATE TABLE `search` (

`id` int(11) NOT NULL auto_increment,

`text` varchar(255) NOT NULL,

`link` varchar(255) NOT NULL,

PRIMARY KEY (`id`)

)

Javascript Code:

$(".searchBtn").click(function(){
	//show the loading bar
	showLoader();
	$('#sub_cont').fadeIn(1500);
	  
	$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());

});

$(".searchBtn").click(function(){

//show the loading bar

showLoader();

$('#sub_cont').fadeIn(1500);

$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());

});

HTML

<div class="textBox"><input id="search" maxlength="100" name="searchBox" type="text" value="">
<div class="searchBtn">&nbsp;</div>
</div>
<div id="content">
<div class="search-background"><label><figure><img src="loader.gif" alt=""></figure></label></div>
<div id="sub_cont">&nbsp;</div>
</div>

</div>

</div>

PHP Code

include("dbcon.php");
$rec = $_REQUEST['val'];

//get table contents
if($_REQUEST['val'])
{
	$sql = "select * from search where text like '%$rec%'";
}
else
{
	$sql = "select * from search ";
}

$rsd = mysql_query($sql);
$total =  mysql_num_rows($rsd);

include("dbcon.php");

$rec = $_REQUEST['val'];

//get table contents

if($_REQUEST['val'])

{

$sql = "select * from search where text like '%$rec%'";

}

else

{

$sql = "select * from search ";

}

$rsd = mysql_query($sql);

$total = mysql_num_rows($rsd);

Table Structure:

Javascript Code:

HTML

PHP Code

Few More Brilliant Posts !