This blog has moved here: | FOLLOW ME ON TWITTER @woork
Sunday, February 15, 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 tag suggestion as-you-type feature (when you save a bookmark on 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

blog comments powered by Disqus
Ron said...

Hey, thanks for the post!
I myself are pretty fond of the Scriptaculous/Prototype autosuggest. real easy to implement and a lot of control!

Keep up the good work!

¥oosu£ said...

thank you, actually i was searching for a SPRY solution , but there is.

thanks alot and continue your MOO works to all the best


Hobbsy said...

great post Antonio

chris24 said...

Thanks so much for the pointer to #4 -- Facebook-Like Auto Suggest - that'll be a lot of help in an upcoming project!

Ashwin said...

Very useful post. Definitely handly for web developers like me. Have bookmarked it for use!!

Hotcouponz said...

Nice collection, thank you.
we will be using option #4

blowind said...

thanks for this useful post

SohoInteractive said...

Clients love auto-suggests in forms. Thanks for the great list.


s.gandhi said...

This is really good compilation. I was looking for some simple script and I found wook ajax auto suggest simplest to implement.

Thanks, i was searching for this for quite some days.

neki arismi said...

nice ^^

Dam said...

great work.
but i did not see any clear cut code which will work like facebook with user image and some other information

Techblogger said...

I find most of the stuff here pretty difficult to configure.

Nice work all the same. Good info.

Burak said...

Nice! Thanks..

us fidelis review said...

Let's do scripting!!! Thanks for posting your AJAX collection.

auto seller network said...

I am also a car lover and I love reading your posts.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News