• Share

10 Cool Auto-Complete scripts using Ajax/jQuery/MooTools/Prototype

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…

Also Check

#1 . Powerful Open Source Data Visualization plugins – Part 1

#2. 7 Brilliant Apple like effects for your website using jQuery

#1. FCBKcomplete – jQuery Plugin

Fancy facebook-like dynamic inputs with auto complete & pre added values.

Facebook Complete - jQuery Plugin

Facebook Complete - jQuery Plugin

Resource: Sample | Tutorial

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

Autocomplete - MooTools Plugin

Autocomplete - MooTools Plugin

Resource: Sample | Tutorial

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

Apple.com style search suggestion using jQuery

Apple.com style search suggestion using jQuery

Resource: Sample | Tutorial

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

Ajax Auto Complete using Prototype

Ajax Auto Complete using Prototype

Resource: Sample | Tutorial

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

Auto Complete using jQuery

Auto Complete using jQuery

Resource: Sample | Tutorial

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

Auto Complete using YUI

Auto Complete using YUI

Resource: Sample | Tutorial

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

Autocomplete using Prototype/Scriptaculous

Autocomplete using Prototype/Scriptaculous

Resource: Sample | Tutorial

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

Autocomplete using Spry

Autocomplete using Spry

Resource: Sample | Tutorial

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

Auto complete using Ajax

Auto complete using Ajax

Resource: Sample | Tutorial

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

Auto complete using DHTML

Auto complete using DHTML

Resource: Sample | Tutorial

OTHER USEFUL PLUGINS

#1 . Powerful Open Source Data Visualization plugins – Part 1

#2. 7 Brilliant Apple like effects for your website using jQuery

5 Responses to 10 Cool Auto-Complete scripts using Ajax/jQuery/MooTools/Prototype

  1. Pingback: Tweets that mention 10 Cool Auto-Complete scripts using Ajax/jQuery/MooTools/Prototype | Ajaxdump -- Topsy.com

  2. Have discovered your blog post via live search the other day and absolutely like it so much. Keep up the truly great work.

  3. Of course, what a terrific internet site and informative posts, I’ll add backlink – bookmark this web site? Regards,
    Reader.

  4. Woj says:

    Hey,

    There is also a new project for Mootools – you can check it on http://code.google.com/p/mootools-autocompleter/

    Regards,

    Woj

  5. John Ortiz says:

    Excellent resources. Thanks.