AutoSuggest | 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 AutoSuggestul
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 youmouseout
. - When you make a selection the item is added to the
input
box. Also there is a hiddeninput
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.