ajax, jquery

jquery auto suggest best plugins


1. jqEasySuggest jQuery AutoSuggest Plugin

jqEasySuggest jQuery AutoSuggest Plugin

Features :

Features

  • Can display any json encoded data as a list
  • Use of up/down arrows to cycle through list
  • Use enter or tab key to select value
  • Display a loading image
  • Store the id of the selected value in a separate field
  • Can have multiple suggestion boxes on one page
  • KeyUp delay to lower the number of calls to ajax page
  • PHP and ASP examples included in the demo download

 

Usage

Use the textbox input id as the jQuery selector for the plugin.

$("#inputBox1").jqEasySuggest({
    ajax_file_path: "php/ajax.php"
});

If you have multiple inputs on your page you can assign an id to each input. The jquery jqEasySuggest autosuggest plugin will create a suggestion list for each input..

$("#inputBox1, #inputBox2").jqEasySuggest({
    ajax_file_path: "php/ajax.php"
});

Here’s an example using an id and custom settings:

// using id and custom settings
$("#inputBox3").jqEasySuggest({
    ajax_file_path      : "php/ajax.php",
    min_keyword_length  : 5,
    showLoadingImage    : true,
    focus_color         : "green",
    keyupDelay          : 500,
    id_element          : "id-holder",
    sql_match_type      : "starts",
    es_width            : "auto",
    es_opacity          : 0.9,
    es_max_results      : 10,
    es_offset_left      : 0,
    es_offset_top       : -5
});

Options

Here are all of jqEasySuggest’s options and their default values:

// these can all be overridden in your code
ajax_file_path      : "",       // path to the file that returns the json encoded results
min_keyword_length  : 2,        // min char length to trigger the ajax lookup
showLoadingImage    : true,     // boolean value to display a loading image in the textbox while typing
focus_color         : "",       // change the textbox border color on focus
keyupDelay          : 200,      // add keyup delay to prevent lookup until user has finished typing (lowers the numbers of ajax calls)
id_element          : "",       // optional id of the element (textbox, hidden textbox, etc.) to store the id of the lookup value
sql_match_type      : "starts", // used in the sql LIKE clause. values are starts, ends, or contains
es_width            : "auto",   // width of the drop down suggest box. auto will automatically calculate the width of the selectors width
es_opacity          : 0.95,     // opacity of the drop down suggest box
es_max_results      : 10,       // max number of results to display in the list of suggestions
es_offset_left      : 0,        // drop down suggest box left offset position
es_offset_top       : 0         // drop down suggest box top offset position

Demo Download

If you find this resource useful, or if you use this code/plugin on your website, consider tossing a buck, or two, my way to help cover costs!

==============================================================================================

2 . JQuery Cool Auto-Suggest

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
You can see the live demo and how to use this plugin here.

Browsers Support
This plugin has been tested and works in the following web browsers.

Mozilla FirefoxInternet ExplorerOperaGoogle ChromeSafari

Attachment Size
Source Code And Example 92.36 KB

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s