Live Search (PHP/Ajax/Javascript/jQuery) Tutorial/Code

Live Search

PHP Ajax Javascript jQuery
Demo | Browse Category | Wednesday, July 27, 2011 by William Thomas

PHP:
Create table for the results of the search

CREATE TABLE `your_database`.`table` (
`id` INT PRIMARY KEY AUTO_INCREMENT ,
`name` VARCHAR( 100 ) NOT NULL ,
`profile` TEXT ,
) ENGINE = MYISAM ;

Create the page where users would type their query "search.php"

<html lang="en-US">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("#q").keyup(function(){
var q = $(this).val();

$.get("ajax-search.php?q="+q+"&page=1", function(data){
if(q){
$(".results").html(data);
}
else{
$(".results").html("");
}
});
});
$(".page").live("click", function(){
var q = $("#q").val();
var page = $(this).attr("id");

$(".results").load("ajax-search.php?q="+q+"&page="+page);
});
});
</script>
<style>
.page {

color: #12495d;

}
.page:hover {

color: #12495d;
cursor: pointer;
text-decoration: underline;

}
.pagenum {
color: #32baed;
}
</style>
</head>
<body>
<input autocomplete="off" id="q"><br><br>
<div class="results"></div>
</body>
</html>

Ajax:

Create the hidden file ajax-search.php where the search results will be shown inside the visible search.php.

<?php

$t = trim(eregi_replace(" +", " ", $_GET["q"]));
$x = explode(" ", $t);

foreach($x as $z)
{
$w++;
if($w==1)
{
$u .= "name LIKE '%$z%'";
}
else
{
$u .= "OR name LIKE '%$z%'";
}
}

$pagenum = $_GET["page"];
$rowsperpage = 3;
$offset = ($pagenum - 1) * $rowsperpage;

$q = mysql_query("SELECT * FROM wcetdesi_other.search_test WHERE $u ORDER BY id DESC LIMIT $offset, $rowsperpage");
$page_nums = mysql_num_rows($q);

$total_q = mysql_query("SELECT * FROM your_database.table WHERE $u");
$total_nums = mysql_num_rows($total_q);
$total_pages = ceil($total_nums/$rowsperpage);

if($total_nums)
{
if($pagenum<1||$pagenum>$total_pages)
{
header("Location: ajax-search.php?q=$t&page=1");
}

while($r=mysql_fetch_array($q))
{

$name = $r["name"];
$profile = $r["profile"];

echo '<div class="result"><a class="link" href="'.$profile.'">'.$title.'</a></div>';
}

echo '<br>';
$range = 4;
$nav = "";

if($pagenum>1)
{
$page = $pagenum - 1;
$first = '<a class="page" id="1">First</a> ';
$prev = '<a class="page" id="'.$page.'">Prev</a> ';
}
else
{
$first = "";
$prev = "";
}

if($pagenum<$total_pages)
{

$page = $pagenum + 1;
$next = '<a class="page" id="'.$page.'">Next</a> ';
$last = '<a class="page" id="'.$total_pages.'">Last</a> ';
}
else
{
$next = "";
$last = "";
}

for($page=($pagenum-$range); $page<=($pagenum+$range); $page++)
{
if(page>0&&$page<=$total_pages)
{
if($total_pages>1)
{
if($page==$pagenum)
{
$nav .= '<span class="pagenum">'.$page.'</span> ';
}
else
{
$nav .= '<a class="page" id="'.$page.'">'.$page.'</a> ';
}
}
}
}

echo $first . $prev . $nav . $next. $last;
}
else
{
echo 'No results for <b>"'.$t.'"</b>';
}

?>

Views: 559 Likes: 0 Dislikes: 0

Email:
Password:
	Keep me logged in

Email: