Auto-Suggest was a cool feature introduced by Google in the 2005 which is really an useful feature in helping the user to complete the query quickly. With so many ajax scripts available now, Auto-complete & Auto-Suggest have come a long way from just a drop down based suggest to a sleek auto-suggest feature & one example is Facebook which has an excellent auto-complete feature while searching friends. Find below is a list of 10 cool auto-complete scripts using Ajax/ jQuery /MooTools/Prototype which can make your site better…
#1. FCBKcomplete – jQuery Plugin
Fancy facebook-like dynamic inputs with auto complete & pre added values.
#2. Autocompleter Script – MooTools Plugin
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.
#3. Apple.com style search suggestion using jQuery
Create a fancy apple.com-style search suggestion using jQuery/CSS/PHP. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request.
#4. Lite weight Autocomplete using Prototype
Ajax Autocomplete for Prototype allows you to easily create autocomplete/autosuggest boxes for text input fields.
This script provides a good performance by caching every query & accessing local cache for every subsequent queries.
#5. Add Auto-Complete feature to your inputbox using jQuery
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.
Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from.
#6. Feature packed Auto-Complete feature using YUI
Yahoo UI library has an excellent tutorial on adding a auto-complete feature. It has features to configure your data source as well as skin your auto-complete section.
#7. Smooth Auto-complete using Prototype/Scriptaculous
A smooth slide down effect for auto-suggest feature which can access response from a data dictionary in JSON/plain text format.
#8. Auto Complete using Adobe Spry
Adobe’s Spry is another interesting Ajax framework which tries to compete against YUI, jQuery & it does seem to have good documentation & feature set. This tutorial is on auto-complete with awesome features & examples to source data from various data sets & also integrate in different programming languages such as PHP, Coldfusion & ASP.
#9. Sleek Auto Complete using 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).
#10. DHTML based Autocomplete
When you have no Ajax frameworks to help, you have DHTML to help – haha yeah DHTML has survived so many years & it can produce features which the current Ajax frameworks can do. This tutorial gives you an insight into adding an auto-complete feature to a dropdown using DHTML.