E-Commerce Development

Need a great E-Commerce website? Please feel free to contact us.
For more information, please click here.

JQuery Cool Auto-Suggest

Submitted by admin on Sat, 06/11/2011 - 15:08

This is the second release of my jQuery Cool Auto-Suggest plugin. This new version still has the same features from the older one. The features are :

Support ID field.
Support image thumbnail and description
Support form submission on click.
And, the new feature is the callback function.

Added Feature

In this new version, you can specify a callback function to be executed when you made a selection on one item. And then, an object parameter containing the selected object will be passed to that callback function to be used later.

How To Use

The basic way of using this plugin did not changed from the previous version. First, include jQuery and this plugins inside the <head> tag.

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.coolautosuggest.js"></script>

Also include this CSS file for styling the suggestions.

<link rel="stylesheet" type="text/css" href="css/jquery.coolautosuggest.css" />

Prepare the textbox.

<input type="text" id="text1" name="text1" />

And finally, initialize the cool auto-suggest textfield. There are some options in this example.

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
  url:"data.php?chars=",
  showThumbnail:true,
  showDescription:true,
  submitOnSelect:true
});
</script>

If the showThumbnail option set to true, it will display image thumbnail on every suggestion item. If the showDescription option set to true, it will show description text on every suggestion item. If the submitOnSelect option set to true, the form (if you have one) will be submitted once you click one of the suggestion items. More complete options and examples can be seen at the Demo page.

Using The Callback

Callback function is the new feature in this version. This is how we use it.

<script language="javascript" type="text/javascript">
$("#text1").coolautosuggest({
  url:"data.php?chars=",
  showThumbnail:true,
  showDescription:true,
  onSelected:function(result){
    // Check if the result is not null
    if(result!=null){
      $("#text1_id").val(result.id); // Get the ID field
      $("#text1_description").val(result.description); // Get the description
    }
    else{
      $("#text1_id").val(""); // Empty the ID field
      $("#text1_description").val(""); // Empty the description
    }
  }
});
</script>

When you made a selection on one item, the selected object will be passed as a parameter to the callback function. In this case, as the result variable. And then, the callback function will be executed. The content of that function is up to you. You can write your own function to handle that selected object.

Server Side Script

This is the server side script that we used. The transferred data is encoded in JSON format. This is the example.

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 
$host="localhost";
$username="test";
$password="";
$database="test";
 
$con=mysql_connect($host,$username,$password) or die(mysql_error());
mysql_select_db($database,$con) or die(mysql_error());
 
$arr=array();
$result=mysql_query("SELECT * FROM people WHERE name LIKE '%".mysql_real_escape_string($_GET['chars'])."%' ORDER BY name LIMIT 0, 10",$con) or die(mysql_error());
if(mysql_num_rows($result)>0){
    while($data=mysql_fetch_row($result)){
        // Store data in array
        $arr[]=array(
        	"id" => $data[0],
        	"data" => $data[1],
        	"thumbnail" => 'images/'.$data[3],
        	"description" => $data[2]
        );
    }
}
 
mysql_close($con);
 
// Encode it with JSON format
echo json_encode($arr);
?>

CSS

You can change the suggestions' styles by customizing the CSS file. Here is the content for the CSS file

/* Style For Suggestions */
 
/*
 For creating side border like this
 | item 1   |
 | item 2   |
 */
.suggestions .suggest_item{
	padding-bottom: 2px;
	padding-top: 2px;
	background-color:#EEEEEE;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
}
 
/*
 For creating top border like this
 ------------
   item 1
   ...
 */
.suggestions .suggest_item.first{
	border-top:1px solid #CCCCCC;
}
 
/*
 For creating bottom border like this
   ...
   item 2
  ------------
 */
.suggestions .suggest_item.last{
	border-bottom:1px solid #CCCCCC;
}
 
/*
 For coloring the selected item
 */
.suggestions .suggest_item.selected, .suggestions .suggest_item.selected .description{
	background-color:#999999;
	color:#FFFFFF;
	cursor:pointer;
}
 
/*
 Image thumbnail
 */
.suggestions .suggest_item .thumbnail{
	background-color: transparent;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 1px 2px 1px 2px;
	float: left;
	width: 50px;
	height: 50px;
}
 
/*
 Description
 */
.suggestions .suggest_item .description{
	font-style: italic;
	font-size: 11px;
	color: #777;
}

Demo