Friday, July 31, 2009

Useful Ajax Auto Suggest scripts collection

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.
ajax autosuggest
http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif
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.
http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif



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.
http://lh5.ggpht.com/_TqPdHmAEwTM/SZgJrRp3mlI/AAAAAAAADyw/3lAvYWAnKP4/as2.png
http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif


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.

TextboxList Autocompletion
http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif
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.

http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif

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.

http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif

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

http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif

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.
http://lh6.ggpht.com/_TqPdHmAEwTM/SZgfMpYrIUI/AAAAAAAADzQ/vnnaVuuQhzM/as6.png
http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif


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.
http://lh5.ggpht.com/_TqPdHmAEwTM/SZgh4Nhk9RI/AAAAAAAADzg/Fp5Kq08pfeY/as7.png

http://www.levietnam.org/images/demo.pnghttp://www.levietnam.org/images/download.gif


No comments:

Post a Comment