8 jQuery Autocomplete Plugins & Tutorials

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. So here are 8 jQuery Autocomplete Plugins & Tutorials that allow you to easily create autocomplete/autosuggest boxes for text input fields.



jQuery Plugin: Auto Complete

Auto-complete takes input from the user, and tries to form a list of words that match the users input. The function attaches itself to the input field selected, and also creates the UL drop down from within so all you need is have the styles for it ready.

jq-autocomplete-1

jQuery UI Autocomplete

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.

jq-autocomplete-2

How To: jQuery Autocomplete

It’s fairly simple. Once you have setup your autocomplete, which I’m not going to cover since it’s in the documentation at the link above, you just need to make your PHP function.

jq-autocomplete-3

Auto-Complete Field with jQuery, JSON & PHP

jQuery makes remote scripting a piece of cake and that led me to spend more time coding additional functionalities for the auto-complete field. In this post I’ll explain how to use my auto-complete field and in a following post I’ll explain all the code.

jq-autocomplete-4

Smart Suggest — Advanced Auto-Complete

Smart Suggest is a “fancy” search suggestion plugin for jQuery (much like Apple’s site search). Smart Suggest takes auto-complete boxes to the next level.

jq-autocomplete-5

jQuery Mobile Autocomplete

Ray Camden released a blog post about adding autoComplete style functionality to jQuery Mobile projects. I thought it was such a good idea that I took his code and converted it into a plugin, adding some additional functionality along the way.

jq-autocomplete-6

Marco Polo

A jQuery autocomplete plugin for the discerning developer.

jq-autocomplete-7

How to Use the jQuery UI Autocomplete Widget

In this tutorial we’ll be looking at one of jQuery UI 1.8’s newest components – the Autocomplete widget. Auto-completing text fields can be a popular choice with visitors to your site because they make entering information much easier. They can be used on product search fields for example, or when a visitor must enter a country, or a city, or anything else that may be a choice from a common dataset. As well as being popular with visitors, the jQuery UI Autocomplete is popular with developers because it’s easy to use, powerful and flexible.

jq-autocomplete-8

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.