JQuery Plugin For Ajax Auto-Suggest

Submitted by admin on Sat, 01/22/2011 - 08:22

This jQuery plugin will help you to create an AJAX auto-suggest or auto-complete textfield easily. Some features it has are :

  • Customizable styles via one CSS file.
  • You can set its width to automatically adjust to the textfield's width or your preferred width.
  • You can specify how many characters typed to trigger the auto-suggest.
  • Stay on top of combobox in IE 6.
  • The data transferred from server is using JSON (JavaScript Object Notation).
How To Use

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.suggestion.js"></script>

Also include the CSS file for styling the suggestions.

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

Prepare the textbox

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

Initialize the auto-suggest textfield.

<script language="javascript" type="text/javascript">
  $("#text1").suggestion({
    url:"data.php?chars="
  });
</script>
Server Side Script

This is the example for the server side script using PHP (require PHP JSON extension).

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 
$host="localhost";
$username="";
$password="";
$database="sample";
 
$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 sample WHERE title LIKE '%".mysql_real_escape_string($_GET['chars'])."%' 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[]=$data[1];
  }
}
 
mysql_close($con);
 
// Encode it with JSON format
echo json_encode($arr);
?>
CSS For Styling

You can change the suggestions' styles such as the font color, background color, and the selected item color 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{
    height:20px;
    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{
    background-color:#999999;
    color:#FFFFFF;
    cursor:pointer;
}
Other options

You can also set the suggestions list to appear after typing some characters using minChars option and also specify its width using width option.

Example :

$("#text2").suggestion({
  url:"data.php?chars=",
  minChars:2,
  width:200
});

By using the code above, the suggestions list will appear after 2 or more characters are typed. It also has a fixed width (200 pixel).

Demo

The demo can be seen here.

Browsers Support

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

Mozilla FirefoxInternet ExplorerOperaGoogle ChromeSafari



AttachmentSize
Source code and example31.22 KB

Tags:

  • Facebook
  • Twitter

Add new comment

More information about text formats

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.