<< Back to php-ajax-autosuggest-jquery-plugin page
Next Post - first-greasemonkey-script >>

Ajax AutoSuggest Jquery Plugin

    This is another useful autocomplete plugin for jquery plugin lovers with facebook theme ;) first version of this plugin was developed in 2009 and posted on planet-source-code.com. which recorded 17888 downloads in one year and Best Code award too. good responce isnt it ?
    First version was just plain autoComplete script with basic features, and looking at responce received, i thought to come up with its next version with bug fixes, features and configurable options so users can easily adopt it. so here i come up again with its jquery plugin version.

Hope to get more responce.

How it works ?

     Provide input field and attach autosuggest plugin to it. as you start typing in it, plugin will start matching entered characters to the values in database and will return all the matching results in list. the way it matches the entries in database is dependant on plugin configuration options provided with this plugin. you can select item(value) you are looking for by using mouse/ UP-DOWN arrows/ TAB key/ ENTER key.
Features
  • Can be easily Configured.
  • Facebook Theme.
  • Faster.
  • Themes can be changed easily with only few changes in CSS.
  • Items can be selected with MOUSE/UP-DOWN arrows/TAB/ENTER key.
  • Tested in Firefox 3.6, IE 8, Google Chrome 6.0.
  • Available in 3 different sizes.
    • jquery.autoSuggest.js - 9kb
    • jquery.autoSuggest_minified.js - 5kb
    • jquery.autoSuggest_packed.js - 3kb
How to use

1) Include Javascript and CSS

<link rel="stylesheet" type="text/css" href="styles/autoSuggest.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.autoSuggest_packed.js"></script>

2) HTML

<input type="text" name="country" id="inputBox">
<input type="hidden" name="id-holder" id="id-holder">

3) Autosuggest Plugin Configuration

							 <script language="javascript"> 
							  $(function() {
								$("#inputBox").autoSuggest({
									ajaxFilePath	 : "server.php",
									ajaxParams	 : "dummydata=dummyData", 
									autoFill	 : false,
									width		 : "auto",
									opacity		 : "0.9",
									limit		 : "10",
									idHolder	 : "id-holder",
									match		 : "contains"
								});
							  });	
							 </script>
Using default settings

Start typing here :

Try configuration options yourself

Plugin Options Generated Code
autofill :
width : (auto OR eg : 100px)
Limit : (Any integer)
match : (starts/ends/contains) 
								 
  $(function() {
	$("#inputBox").autoSuggest({
		ajaxFilePath	 : "server.php", 
		ajaxParams	 : "dummydata=dummyData", 
		autoFill	 : false, 
		iwidth		 : "auto",
		opacity		 : "0.9",
		ilimit		 : "10",
		idHolder	 : "id-holder",
		match		 : "contains"
	});
  });
Option Description
ajaxFilePath This option will hold file path which will return options to ajax call.Default value is NULL.
ajaxParams If you want to send custom parameters to ajax file then you can pass all that parameters through this variable in single querystring. Default value is NULL.
autoFill If you want to fill the value under mouse/keyboard in the textfield then set this variable to true. Default value is false.
iwidth iWidth options holds desired width of suggestion list. Possible values could be
1) auto - Automatically adjusts with input fields width.
2) Any integer (Ex : 100px) - user defined
Default value is auto.
opacity Opacity of the suggestion list. It can be anything from 0.0 to 1.0
ilimit iLimit option holds number of results (items) you want to show in the suggestion list.
idHolder If you want to save id of selected item and want to pass it to next page for further processing then 'idHolder' is the thing you are loking for. enter input field name in this option. and autoSuggest plugin will automatically store id of the selected item in supplied field.
match This is additional option seen in only few plugins. now with this option you can tell autosuggest plugin which search criteria to use.
1) starts - Lists all the values that starts with entered text.
2) ends - Lists all the values that ends with entered text.
3) contains - Lists all the values that contains with entered text.
Change Log

Jquery autosuggest version (Version 1.1)

  • Added keyboard support.
  • Selection can be made with UP/DOWN arrow keys.
  • TAB key support for option selectection.
  • ENTER key support for option selectection.
  • Prevented form submission on ENTER key.
  • Extra parameters can be passed to server.php

Jquery autosuggest version (Version 1.0)

  • Jquery autosuggest version 1.0 launched
Future Development
  • Multiple instances not supported.
  • Not tested with Safari, Opera, Firefox 3, IE6, IE7.
     This plugin does not support Multiple instances which is actually a major development remaining in this plugin, making it support multiple instances will take some time as i need to make many changes and it will take some time and there are 1000+ script ideas bouncing in my mind to come out and occupy pages on this blog. so this feature will be added upon visitors responce and requests.
     Also i have not tested this script in Safari, Opera, Firefox 3, IE6, IE7. i am requesting test results from visitors of this page in above browsers so i can make changes in CSS and javascript to make it compatible for above browsers.
Download PHP ajax jquery autoSuggest plugin in Zip format Download download PHP ajax jquery autoSuggest plugin