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

Author: Zeeshan Rasool | Last updated on July 24th, 2010

AJAX, JQuery, PHP, Web Development

[ad#co-4]

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

[ad#co-2]

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 type="text" value="" maxlength="100" name="searchBox" id="search">
	<div class="searchBtn">
	&nbsp;
       </div>
</div>
<br clear="all" />
<div id="content">
	<div class="search-background">
	<label><img src="loader.gif" alt="" /></label>
	</div>
	<div id="sub_cont">	
	</div>
</div>

</div>

</div>

</div>

[ad#co-2]

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);

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com