15 Best Techniques For Implementing Autosuggest With AJAX Into Your Site

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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)

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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)

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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

autosuggest-with-ajax

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:

7 Comments

  1. Vani June 30, 2009
  2. Bariski July 1, 2009
  3. Simran July 3, 2009
  4. Paul July 4, 2009
  5. Bariski July 4, 2009
  6. Chris July 15, 2009
  7. AB Web Design, LLC July 17, 2009

Leave a Reply

Your email address will not be published. Required fields are marked *