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:
|
1 2 3 4 5 6 |
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:
|
1 2 3 4 5 6 7 8 |
$(".searchBtn").click(function(){ //show the loading bar showLoader(); $('#sub_cont').fadeIn(1500); $("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader()); }); |
HTML
|
1 2 3 4 5 6 7 |
<div class="textBox"><input id="search" maxlength="100" name="searchBox" type="text" value=""> <div class="searchBtn"> </div> </div> <div id="content"> <div class="search-background"><label><figure><img src="loader.gif" alt=""></figure></label></div> <div id="sub_cont"> </div> </div> |
PHP Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
