10 Ajax/jQuery Autocomplete Tutorials/Plugins

Sam Deering

Today we are sharing you our compilation of best Ajax and jQuery autocomplete and autosuggest tutorials and plugins with examples. People these days want an instant search and for this, search engines like Google are doing just this. Enjoy!

Related Posts:

Update 21/06/13: Added typahead.js, Magicsuggest, TimeDropdowns.
Update 29/09/13: Added textextjs

typahead.js Autocomplete

A fast and fully-featured autocomplete library.
typiahead
Source + Demo

Magicsuggest Autocomplete

Highly flexible auto suggest combo box in the line of Bootstrap themes.
magicsuggest
Source + Demo

TimeDropdowns Autocomplete

Better time drop downs for ranges: jQuery Time Autocomplete.
betterdropdowns
Source + Demo


1. Ajax-Driven JavaScript ComboBox with Autocomplete

dhtmlxCombo is a cross-browser JavaScript combobox with an autocomplete feature. It extends basic select box functionality and provides the ability to display suggestions while a user types in the text field.


Ajax-Driven JavaScript ComboBox

Source + Demo

2. Yahoo and Google Suggestions jQuery Search Box

Learn how to create Yahoo Google suggestions search box in this post.


Yahoo and Google Suggestions

Source + Demo

3. WICK Web Input Completion Kit

An evolving framework that leverages web standards such as JavaScript, DOM and CSS to facilitate textual input in form UI elements assisted by local and remote data sources. This framework strives to remain unobtrusive and preserve a form’s semantics and accessibility.


WICK Web Input

Source
Demo

4. PrimeFaces: jQuery AutoComplete

Multiple selection feature for PrimeFaces jQuery AutoComplete has been a popular request and with 3.1, we’ve decided to bring it. Initial implementation was based on a simple input text and values were separated with commas but it didn’t match the coolness standard of PrimeFaces so we’ve decided to implement it Facebook style.


PrimeFaces

Source
Demo

5. Ajax-Based Multiselect jQuery Autocomplete Control in ASP.Net

Here, we will use jQuery UI Autocomplete Control. To get the Data using AJAX, here we will try Handlers of ASP. Using Handlers against simple asp.net page is that, if we will use ASPX page then it will go through all the phases of page (nearly 1o) whereas Handler is faster than ASPX page.


Ajax-Based Multiselect

Source + Demo

6. Autosuggest / Autocomplete with jQuery, Ajax, XML, PHP

The jQuery Autocomplete class adds a popdown 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 tab key. The values for the suggestion list are to provide as XML (by a PHP script, or similar).


Autosuggest / Autocomplete with jQuery

Source
Demo

7. FCBKcomplete v 2.8.4

Fancy Facebook-like dynamic inputs with auto complete & pre added values. If you have any comments or requests, please post it and I will try to include all the requested features in the upcoming release.


FCBKcomplete

Source
Demo

8. A fancy Apple.com-style jQuery search suggestion

Make sure you check out the demo (or visit Apple.com) to see this awesome effect work. 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 jQuery search

Source
Demo

9. AJAX Search Suggest with jQuery

To recreate the search suggest feature, we’re going to use jQuery and a small amount of PHP to query the server for search terms. To allow these two scripts to communicate, we’ll make use of AJAX — passing a string containing the search term from jQuery to PHP.


AJAX Search Suggest

Source
Demo

10. Easy-To-Use jQuery-Ajax Autosuggest Plugin

This jQuery Ajax autosuggest plugin has the usual functionality with a little extra flexibility: multiple instances, passing custom parameters, the id and the value are returned, keyboard-controlled, and a few others… Almost anything you need from an autosuggest plugin you can do with the built-in options!


jQuery-Ajax Autosuggest

Source
Demo

11. jQuery TextExt Plugin

TextExt is a plugin for jQuery which is designed to provide functionality such as tag input and autocomplete.

textext
Source+Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://deuci.com Jeffrey Lin

    #2 seems very useful. have to try it out. though Google adsense already has an autofill / autocomplete search widget, but this may give more flexibility.

    • jquery4u

      @Jeffrey, cool, can you share a link to it?

      • Vignesh Prasanth

        Any one please help to use this above plugins JSP Ajax. If any examples that might helpful.

  • dewv

    holas

  • Dhaval Bakhda

    i want to use #2nd option in my web site can u help me how to use as i am new to js…

  • Amit groch

    i want use 3rd option in my website can u help me plz…

    • http://namo.com WTF

      no

  • Jillian Galloway

    I really like #8 but it doesn’t allow the user to arrow down through the options. I need something that’ll allow me to arrow down AND will forward to a new page based on the chosen option rather than just populating an input field.

    • http://namo.com WTF

      if u like keep it with you only ok

  • Awais

    @disqus_lt9UuWYFAg:disqus Thanks Man so far this is the best link.

  • http://tips-galaxy-y.blogspot.com/ Handi Susanto

    thanks bro,

    #bookmark :)

  • http://namo.com WTF

    333

  • http://namo.com WTF

    aa

  • http://namo.com WTF

    have anyone ask fot ur suggestion just do ur work ok

  • Mokl

    nice work