[Web-development (jquery)] Create a Jquery/Ajax, php, mysql - style suggestion search

Create a Jquery/Ajax, php, mysql - Style suggestion search

Database table

CREATE TABLE IF NOT EXISTS `search` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`img` varchar(255) NOT NULL,
`desc` text NOT NULL,
`url` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

Download

Download suggestion_search.zip



Jquery/ajax code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
function find(textboxString) { 
	if(textboxString.length == 0) { 
 $('#resultbox').fadeOut(); // Hide the resultbox box 
	} else { 
 $.post("data.php", {queryString: ""+textboxString+""}, function(data) { // Do an AJAX call 
 $('#resultbox').fadeIn(); // Show the resultbox box 
 $('#resultbox').html(data); // Fill the resultbox box 
 }); 
	} 
	// Fade out the resultbox box when not active 
 $("input").blur(function(){ 
 $('#resultbox').fadeOut(); 
 }); 
 // 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+ 
	$("#resultbox").css(cssObj); 
} 
</script> 

CSS Style

<style> 
	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; } 

	/* COMMON CLASSES */ 
	.break { clear:both; } 
	#searchwrapper { 
 width:310px; /*follow your image's size*/ 
 height:40px;/*follow your image's size*/ 
 background-image:url(searchbox.jpg); 
 background-repeat:no-repeat; /*important*/ 
 padding:0px; 
 margin:0px; 
 position:relative; /*important*/ 
	} 
	#searchwrapper form { display:inline ; } 
	.searchbox { 
 border:0px; /*important*/ 
 background-color:transparent; /*important*/ 
 position:absolute; /*important*/ 
 top:5px; 
 left:9px; 
 width:256px; 
 height:28px; 
 color:#FFFFFF; 
	} 

	/* SEARCHRESULTS */ 
	#dbresults { border-width:1px; border-color:#919191; border-style:solid; width:310px; 
 font-size:10px; margin-top:20px; -moz-box-shadow:0px 0px 3px #aaa; 
 -webkit-box-shadow:0px 0px 3px #aaa; 
 box-shadow:0px 0px 3px #aaa; 
 -moz-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px; 
 padding-top:42px; 
	} 
	#dbresults a { display:block; background-color:#D8D6D6; clear:left; height:56px; text-decoration:none; } 
	#dbresults a:hover { background-color:#b7b7b7; color:#ffffff; } 
	#dbresults a img { float:left; padding:5px 10px; } 
	#dbresults a span { color:#555555; } 
	#dbresults a:hover span { color:#f1f1f1; } 
</style> 

index.html

<div> 
	<div><h2>What are you looking for?</h2></div> 
	<form> 
 <div> 
 <input type="text" size="30" value="" onkeyup="find(this.value);" /> 
 </div> 
 <div></div> 
	</form> 
</div> 

data.php code

<p> 
<?php 
	$db = new mysqli('localhost', 'root', 'ednalan', 'test'); 
	if(!$db) { 
 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 searchs WHERE name LIKE '%" . $queryString . "%' ORDER BY name LIMIT 5"); 
 if($query) { 
 while ($result = $query ->fetch_object()) { 
 echo '<a href="'.$result->url.'">'; 
 echo '<img src="search_images/'.$result->img.'" />'; 
 $description = $result->desc; 
 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> 

source : http://google.com, http://tutorial101.blogspot.com, http://okezone.com