Making your site as user friendly and easy to navigate as possible is every developers goal and implementing autosuggest is one way to help achieve it. Not only is it helpful to the user but is also somewhat expected now that most of the top sites have already built this functionality into their own sites. This collection includes standard auto suggest scripts, del.icious tag suggestion, autosuggest control to search images on Flickr, and advanced table filter with auto suggest control.
01. Ajax Auto Suggest v.2
The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar).
The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar).
02. SearchField
SearchField features 3 states for search input field based on user's actions. We have inactive state, on click state (on focus to be exact) and inactive with user inputted text. You've seen these features on many sites but the difference here is that all you need to do is provide id to your search field, script takes it from there. Additional feature, that can be turned on and off, is a search suggestion terms displayed as a dropdown box below the search field.
SearchField features 3 states for search input field based on user's actions. We have inactive state, on click state (on focus to be exact) and inactive with user inputted text. You've seen these features on many sites but the difference here is that all you need to do is provide id to your search field, script takes it from there. Additional feature, that can be turned on and off, is a search suggestion terms displayed as a dropdown box below the search field.
03. Google Suggest Style Filter with the AutoComplete Control
If are familiar with Google Suggest, the concept behind the AutoComplete control is the same. As you type into a textbox, a drop down list appears that provides suggestions for what it is that you are trying to type.
If are familiar with Google Suggest, the concept behind the AutoComplete control is the same. As you type into a textbox, a drop down list appears that provides suggestions for what it is that you are trying to type.
04. Spellify
Spellify is a script.aculo.us/prototype based spell checker for form fields that utilizes Google as its spell check engine.
Spellify is a script.aculo.us/prototype based spell checker for form fields that utilizes Google as its spell check engine.
05. Yahoo! UI Autosuggest Control
This uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The generateRequest() method has been customized in order send additional required parameters to the Flickr application. The formatResult() method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a itemSelectEvent handler has been defined to collect selected images in a separate container.
This uses AutoComplete to find images by tag from the Flickr webservice. A simple PHP proxy is used to access the remote server via XHR. The generateRequest() method has been customized in order send additional required parameters to the Flickr application. The formatResult() method has been customized in order to display images in the results container, and the default CSS has been enhanced so the results container can scroll. Finally, a itemSelectEvent handler has been defined to collect selected images in a separate container.
06. Auto-complete Control
Most auto-complete textboxes may have a reverse effect on end-users. Instead of helping them get things done faster, they get irritated by design flaws made by the programmer.
Most auto-complete textboxes may have a reverse effect on end-users. Instead of helping them get things done faster, they get irritated by design flaws made by the programmer.
07. Facebook-Like Auto Suggest
It is a auto suggest script which simulate Facebook auto suggest feature. It works by caching all the results from a JSON Request and feeding them to the auto completer object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.
It is a auto suggest script which simulate Facebook auto suggest feature. It works by caching all the results from a JSON Request and feeding them to the auto completer object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.
08. AutoComplete 1.2 (prototype)
This prototype framework autocomplete also uses scriptaculous. It has a nice fade in effect when the suggest box appears. It is easy to implement and works with XML data.
This prototype framework autocomplete also uses scriptaculous. It has a nice fade in effect when the suggest box appears. It is easy to implement and works with XML data.
09. dhtmlxCombo
dhtmlxCombo is a cross-browser JavaScript combobox with autocomplete feature. It extends basic selectbox functionality to meet the requirements of the most up-to-date web applications. dhtmlxCombo can be converted from existing HTML SELECT or populated with JavaScript. Supporting AJAX, it can also get list values from the server datasource dynamically.
dhtmlxCombo is a cross-browser JavaScript combobox with autocomplete feature. It extends basic selectbox functionality to meet the requirements of the most up-to-date web applications. dhtmlxCombo can be converted from existing HTML SELECT or populated with JavaScript. Supporting AJAX, it can also get list values from the server datasource dynamically.
10. jQuery Tag Suggestion
If you're familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support. The tagging works so well within del.icio.us is that it helps you create a subset of tags that you commonly use for different types of links. This way, it makes it easier to find tagged content later on. i.e. conversely if it didn't suggest links, it would be likely that you would have different variations or even spellings of the same tag on (what should be) grouped content. So, in an effort to adopt this approach, Author has created a jQuery plugin for tag suggestion.
If you're familiar with del.icio.us you will be familiar with the tag suggesting as-you-type support. The tagging works so well within del.icio.us is that it helps you create a subset of tags that you commonly use for different types of links. This way, it makes it easier to find tagged content later on. i.e. conversely if it didn't suggest links, it would be likely that you would have different variations or even spellings of the same tag on (what should be) grouped content. So, in an effort to adopt this approach, Author has created a jQuery plugin for tag suggestion.
11. AutoCompleter v1.1 (mootools)
This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
12. Spry Auto Suggest Widget
A Spry widget is a page element containing built-in behaviors and functions that provide a richer user experience by enabling user interaction. These behaviors can include functionality that lets users show or hide content on the page, change the appearance (such as color of the input) in the page, interact with menu items, and much more.
A Spry widget is a page element containing built-in behaviors and functions that provide a richer user experience by enabling user interaction. These behaviors can include functionality that lets users show or hide content on the page, change the appearance (such as color of the input) in the page, interact with menu items, and much more.
13. jqac
There is a lot of auto-complete/suggest javascript libraries. In this library the author used power and simplicity of jQuery and different javascript ideas and techniques.
There is a lot of auto-complete/suggest javascript libraries. In this library the author used power and simplicity of jQuery and different javascript ideas and techniques.
14. TextboxList
TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.
TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.
15. jSuggest 1.0 – Advanced Auto-complete for jQuery
jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.
jSuggest is yet another auto-completer for your text input box. It mimics the functionality of Google suggest. jSuggest will also bind item selection to your up and down arrows and also allow you to select the suggestions using your mouse.
Besides these if you want to learn how to make your own Ajax Auto Suggest scripts you can refer here:
If you enjoy this post, make sure you 
Bariski has written 88 articles on this site.
Old Comments:
-
Vani
said on
Jul 1, 2009 2:49:00 AM
-
-
-
Bariski
said on
Jul 1, 2009 9:16:00 AM
-
-
-
Simran
said on
Jul 3, 2009 10:19:00 AM
-
-
-
Paul
said on
Jul 4, 2009 6:54:00 PM
-
-
-
Bariski
said on
Jul 4, 2009 7:23:00 PM
-
-
-
Chris
said on
Jul 15, 2009 10:42:00 AM
-
-
-
AB Web Design, LLC
said on
Jul 17, 2009 10:09:00 PM
-
-
blog comments powered by Disqus"Great article! Thanks for taking the time to explain Autosuggestion methods with ajax;;)
I'm glad you like it buddy.
Hey Bariski ! really a nice collection ! Thanks for these :)
Great list! :) Thanks for sharing. I'm going to try some of these and maybe use permanently somewhere because it really helps while looking for any information.
I'm glad you folks like it :)
Awesome, this was something I was planning utilizing in the near future, and I just happened to see it in your recent blog posts. Bookmarked. Thanks!
Cheers!
Chris
AB Web Design, LLC
Update: Just utilized #14 on client's site. Gotta love jquery! Thanks again.