Ajax search for your website
This is how it's looks like in our website.when visitor type any keywords it gives suggestions like google search.visitor doesn't has to reload any anything.this search increase performance in your web site.
this is how its looks like
CSS
/* BASIC RESET */
body, div, img, p { padding:0; margin:0; }
a img { border:0 }
/* HTML ELEMENTS */
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-color:#efefef; background-image:url(../images/bg.jpg); }
/* COMMON CLASSES */
.break { clear:both; }
/* SEARCH FORM */
#searchform { margin:50px 200px; font-size:18px; }
#searchform div { color:#eeeeee; }
#searchform div input { font-size:18px; padding:5px; width:320px; }
#suggestions{ position: relative; left:235px; width:320px; display:none; }
/* SEARCHRESULTS */
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; }
#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.category { font-size:11px; margin:5px; display:block; color:#ffffff; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;
background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
JS
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function()
{
// Safely inject CSS3 and give the search results a shadow
var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard
'-webkit-box-shadow' : '#888 5px 10px 10px', // Safari
'-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+
$("#suggestions").css(cssObj);
// Fade out the suggestions box when not active
$("input").blur(function(){
$('#suggestions').fadeOut();
});
});
function lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').fadeOut(); // Hide the suggestions box
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data) { // Do an AJAX call
$('#suggestions').fadeIn(); // Show the suggestions box
$('#suggestions').html(data); // Fill the suggestions box
});
}
}
PHP
<p id="searchresults">
<?php
// PHP5 Implementation - uses MySQLi.
// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'root', '', 'sep');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
$query = $db->query("SELECT * FROM animals WHERE description LIKE '%" . $queryString . "%' GROUP BY type LIMIT 8");
if($query) {
// While there are results loop through them - fetching an Object.
while ($result = $query ->fetch_object()) {
echo '<span class="category">'.$result->type.'</span>';
echo '<img src="'.$result->thumbpath.'" alt="" width="64px"/>';
echo "<a href=\"test.html\">";
$name = $result->name;
if(strlen($name) > 35) {
$name = substr($name, 0, 35) . "...";
}
echo '<span class="searchheading">'.$name.'</span>';
$description = $result->description;
if(strlen($description) > 80) {
$description = substr($description, 0, 80) . "...";
}
echo '<span>'.$description.'</span></a>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
?>
</p>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
<form id="searchform">
<div>
What are you looking for? <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
</div>
<div id="suggestions"></div>
</form>
</div>
</body>
</html>
_________________________________________________________________________________
this is how the search result displays
<?php session_start(); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/jpg" href="images/static/icon.jpg"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/expand.js"></script>
<title>Dehiwala Zoo - දෙහිවල à·ƒà¶à·Šà·€à·à¶¯à·Šâ€à¶ºà·à¶±à¶º - Sri Lanka</title>
<script type="text/javascript" src="js/common.js"></script>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="all" />
</head>
<body>
<?php
include './controllers/db.php';
$animalid=$_GET["id"];
$searchresult= mysql_query("select * from animals where id='$animalid'" );
while (($row = mysql_fetch_array($searchresult))) {
$imagepath = $row['path'];
$detail = $row['description'];
$type= $row['type'];
$sename= $row['name'];
}
?>
<?php include('models/header.php') ?>
<?php include('models/scroll.php') ?>
<div class="menubar">
<?php include('models/mainmenu.php') ?>
</div>
<div class="wrapper" style="background-color: transparent">
<center>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/book.css" />
<script src="js/modernizr.custom.js"></script>
<ul class="align" style="margin:20px;">
<li>
<figure class='book'>
<!-- Front -->
<ul class='hardcover_front'>
<li>
<img src="<?php echo "images/".$imagepath; ?>" alt="" width="100%" height="100%">
</li>
<li></li>
</ul>
<!-- Pages -->
<ul class='page'>
<li></li>
<li>
<h1 style="font-size: 20px; color: #009F00"> Type : <u><?php echo $type;?></u></h1>
<h1 style="font-size: 20px;"><?php echo $sename.":".$detail?></h1>
</li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- Back -->
<ul class='hardcover_back'>
<li></li>
<li></li>
</ul>
<ul class='book_spine'>
<li></li>
<li></li>
</ul>
</figure>
</li>
</ul>
</center>
</div>
<div class="content_main_line"></div>
<div align="center" class="footer"><?php include('models/sitemap.php') ?>
</div>
</body>
</html>
No comments:
Post a Comment