Sunday, 15 February 2009

Useful Ajax Auto Suggest scripts collection

This post is a collection of some interesting and useful Ajax Auto Suggest scripts ready to use (from beginner or professional web developers) in your web projects. 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.

If you want to suggest other interesting links please add a comment, thanks!

1. 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). This auto suggest class is very simple to customize and reuse in your web pages. Take a look here for the demo.

2. Woork PHP component: Autosuggest
Woork Autosuggest is a simple "PHP component" ready to use which implement autosuggest feature using PHP and MySQL. The component is lightweight (only with 8Kb) and ready to use simply customizing some parameters.

3. Spry Auto Suggest Widget
Spry Auto Suggest Widget (provided from Adobe Labs) use Adobe Spry framework to implement auto suggest feature in a input field. This is an example of using a Spry region and non-destructive filter to create an auto suggest widget. The suggestions can be displayed in any HTML structure. Spry uses the the tag ID to identify the suggest list container. In this example, there are three different HTML structures based on: table, div-span, ul-li.

4. Facebook-Like Auto Suggest
Guillermo Rauch's Facebook-like Auto Suggest is another 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 autocompleter 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.

5. jSuggest 1.0

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.

6. Yahoo! UI Autosuggest Control
Yahoo! UI Autosuggest Control 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.

7. CAPXOUS.AutoComplete
CAPXOUS.AutoComplete is a standalone widget without dependencies, lightweight (only 4 kb) which provides auto suggest feature with an huge scrollable drop down list. It's simple to customize and implement on your web pages with a lot of languages.

8. jQuery Tag Suggestion
jQuery Tag Suggestion plugin simulates del.icio.us tag suggestion as-you-type feature (when you save a bookmark on del.icio.us). Tag suggestion helps you create a subset of tags that you commonly use for different types of links.


9. Google Suggest Style Filter with the AutoComplete Control
Matt Berseth's AutoComplete control provides smarter filtering capabilities for data tables which allow the user to select a filter column from a drop down list. Take a look here for the live demo.

Related Content
- File uploaders collection for web developers
- Best Image Croppers ready to use for web developers
- Beautiful datepickers and calendars for web developers
- Useful resources to improve the look and features of HTML Forms

No comments:

Post a Comment