JQuery Plugin For Ajax Auto-Suggest

Posted on: 22 January 2011
By: admin

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).

This plugin has been rewritten into a new plugin named JQuery Cool Auto-Suggest. Please use that one from the following link:

http://w3shaman.com/article/jquery-cool-auto-suggest

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 Firefox Internet Explorer Opera Google Chrome Safari

Attachment	Size
Source code and example	31.22 KB

Tags:

javascript

jquery

auto-suggest

Comments

Ar condicionado... (not verified)

Tue, 03/04/2014 - 06:02

Permalink

Thanks so much for writing

Thanks so much for writing all of the excellent information!

ar condicionado automotivo

tedmosby545 (not verified)

Thu, 03/20/2014 - 21:22

Permalink

I was able to automatically adjust to the textfield's width. This is an interesting feature!! Importantly all these features are supported in almost all the commonly used browsers. I guess that is the greatest advantage. Thanks a lot for sharing.
pc windows xp