Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

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 FirefoxInternet ExplorerOperaGoogle ChromeSafari



AttachmentSize
Binary Data Source code and example31.22 KB

Comments

Thanks so much for writing all of the excellent information!

ar condicionado automotivo

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

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • 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.