JavaScript
Article

10 jQuery Search Scripts

By Sam Deering
With so many Ajax scripts available now, Auto-complete and Auto-Suggest have come a long way from just a drop down based suggest to a sleek auto-suggest feature and 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. Have fun!

Related posts:


1. FCBKcomplete – jQuery Plugin

Fancy Facebook-like dynamic inputs with auto complete and pre added values.
FCBKcomplete-–-jQuery-Plugin-.jpg
Source


2. AutoCompleter Script

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.
AutoCompleter-Script-–-MooTools-Plugin-.jpg
Source


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-.jpg
Source


4. Lite Weight AutoComplete using 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 query.
Lite-Weight-AutoComplete-using-Prototype-.jpg
Source


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.
Add-Auto-Complete-feature-to-your-InputBox-using-jQuery-.jpg
Source


6. Feature packed Auto-Complete feature using YUI

Yahoo UI library has an excellent tutorial on adding an auto-complete feature. It has features to configure your data source as well as skin your auto-complete section.
Feature-packed-Auto-Complete-feature-using-YUI-.jpg
Source


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.
Smooth-Auto-complete-using-Prototype-or-Scriptaculous-.jpg
Source


8. Auto Complete using Adobe Spry

This tutorial is on auto-complete with awesome features and examples to source data from various data sets & also integrate in different programming languages such as PHP, Coldfusion and ASP.
Auto-Complete-using-Adobe-Spry-.jpg
Source


9. Sleek Auto Complete using Ajax

The AutoSuggest class adds a pull down 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.
Sleek-Auto-Complete-using-Ajax-.jpg
Source


10. DHTML based AutoComplete

This tutorial gives you an insight into adding an auto-complete feature to a dropdown using DHTML.
DHTML-based-AutoComplete-.jpg
Source

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.