JQuery Plugin For Ajax Auto-Suggest
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:
- How To Use
-
Include jQuery and this plugins inside the <head> tag.
Also include the CSS file for styling the suggestions.
Prepare the textbox
Initialize the auto-suggest textfield.
- Server Side Script
-
This is the example for the server side script using PHP (require PHP JSON extension).
<?phpheader("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 formatecho 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
- 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 :
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.
| Attachment | Size |
|---|---|
 Source code and example | 31.22 KB |
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
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