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

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).

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.