You are free to browse all of the content on this site, however if you want to post comments or replies you will need to register for a free account. Becoming a registered member also disables some of the more annoying ads whilst you are logged in.

jQuery: Autocomplete Tutorial

Over the last few articles about jQuery, we've shown you how to write plug-ins to encourage reusable code. Sometimes, before writing a plug-in your first step should really be to see if someone else has done it for you.

You're also going to need a text field in a form on your HTML page, so your next step would be to add this to the body of your document:

Code:

<form>
<input id="AC" type="text" />
</form>

02: The Most Basic Autocomplete

Back up in the head of the document, we're going to put script tags after all the included files, and then wrap the call to the plug-in in a document.ready block. After the ready block, we'll include the array 'programmingLang'.

You can see this working as the first example in example.html. As you type, it shows a lists of possible matches based on what you've typed. The more characters you type in, the shorter the list gets. This is simplest way to use the autocomplete, but not necessarily the most versatile.

03: JSON from the Server Autocomplete

This option is more powerful, but you have to write the matching code yourself. Everything the server returns in JSON format is shown as an option, so if you return "Illinois" when someone types in "ZZ" that's what the widget thinks will match. Here's the set-up for using a remote data source:

Again, very simple. If you try to run this example without a web server, it will fail because it requires the remote file states.php. You can see this example working on the <a href="http://www.medetis.com/give-up-already/autocomplete/">Demo Site</a>. In case you know some PHP, here's a rough idea how the matching code works:

First we check for 2 letter matches (state abbreviations), then if the search term matches the start of a state's name, finally if its anywhere in a state's name. At the end we JSON encode and echo the results out, after filtering out duplicates and reindexing the array.

If you use this method, the data source must be on the same domain as the requesting page.

04: Function as Autocomplete

The third option to supply your autocomplete with data is a function. Using a function is more powerful then the other two options; you can use it to return custom sorted data from an in page array, or to fetch and aggregate data from multiple scripts. You can even use it to fetch data from a URL not on the same server (JSONP).

In order to get data from a server other then the one the page is hosted on, you must use JSON-P (which stands for JSON-Padded). Basically the server must know to return the data wrapped in a function call which is then executed by the browser. jQuery has JSON-P handling built right in.

You'll notice the 'source' this time is a function which takes two parameters:

request: Has the string from the text box stored in request.term

response: Is a function reference which expects to have the data to show passed to it

In order for jQuery to know you're expecting JSON-P, you have to attach '&callback=?' to the outgoing query string. We do this in our $.getJSON call.

In the callback of $.getJSON, we then pass the received data to the 'response' function reference. You can do any other processing of the variable data that you want to previous to this point.

This example will work even if you run the example.html file from your desktop. The second example won't because it can't request data from a source not on the same domain.

The server side code for JSON-P also changes a little bit -- only one line. When returning data to the browser, it's going to be formatted as a function wrapping a JSON string. The value of 'callback' has been provided by jQuery. So the last line of the server side script would be:

jQuery has many great prebuilt plug-ins you can use in your applications and websites today. Both the jQuery-UI project, and the main jQuery plug-ins site are great resources you should take advantage of in your jQuery development.