Looking for an jQuery auto complete plugin that has similar effect like Facebook? Here you are: AutoSuggest, a very lightweight jQuery plugin that makes auto-completing extremely easy.

Their example might be a little bit complex to understand. Here is a simpler one that i did:  auto_suggest

You can take a look. Have fun!

How It Works

AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest. Also, AutoSuggest uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file.

As you type into the AutoSuggest input box, it will filter through it’s Data and “suggest” matched Data items to you. You can pass in an Object of Data to AutoSuggest or you can have it call a URL as you type to get it’s Data from. AutoSuggest will display the matched Data items in a selectable list, which is 100% customizable. You have the option of structuring the HTML elements of that list however you want via the formatList callback function. You case an example of this in the second example above.

When you type into the input box and the “suggestion” dropdown list appears, a few things happen:

• A class of “loading” is applied to the main AutoSuggest ul while the data is loaded. That class is then removed when all processing has finished and before the suggestion results list is made visible.
• As you hover over each suggested option in the list a class of “selected” is added to that item, and then removed when you mouseout.
• When you make a selection the item is added to the input box. Also there is a hidden input field generated for each AutoSuggest box that stores the values (comma separated) of each item you have selected. This input box will have a unique ID as well as a class name of “as-values”.

The plugin expects the Data passed into it (or gathered from the URL) to be formatted in JSON. JSON is an extremely easy format to work with, and if you don’t already… you should 🙂 To learn more about JSON, check out my post/video, An Introduction to JSON.

When an AJAX request is made the search string is sent over in a param named “q” by default. However you can change that name with the queryParam option. Here is a default example AJAX request: http://www.mysite.com/your/script/?q=mick
“mick” would be the search query that was typed into the input box. Be sure to setup your server-side code to grab that param and send back some results.

As of AutoSuggest version 1.4 you can now create selections by using the tab or comma keys. To do this simply type something into the box and hit the tab or comma keys. The selection is added to AutoSuggest in the exact same manner as if it were chosen from the Results dropdown.

AutoSuggest has been tested (and works) in: IE7 & IE8, Firefox, Safari, Opera, and Chrome.