Guidelines

Setup

Autocompletion of input elements is a very helpful tool to guide users in entering the right value. That value can come from a (big) list of possible values or it may consist of values the user has entered before. This plugin makes it easy for developers to setup autocomplete for text inputs and textareas.

First step in setting up autocomplete is to decide what kind of data is provided. To autocomplete a few dozen possible values, it is a good idea to provide local data. The data is loaded only once and then cached, providing a very responsive interface. If the data can consist of hundreds, thousands or even millions of rows, the searching and filtering must be done where performance won't suffer, in most cases a relational database (eg. MySQL). The plugin will request the rows for the entered value, displaying only a subset of all possible values. For local autocomplete, just pass the data as an array to the autocomplete plugin. For remote autocomplete, specify a URL to the resource providing the data. The plugin then requests data with a "q" parameter containing the current search value.

Dependencies between fields

Often one autocompleted field depends on the value of another field. In that case, the extraParams option can provide the necessary dynamic parameter:

Consider an example where the states-field reuses the value entered into the country field:

$("#states").autocomplete(url, {
   extraParams: {
       country: function() { return $("#country").val(); }
   }
}); 

That way the serverside can return all states that have a country by that name.

Stylesheets

The plugin provides the stylesheet jquery.autocomplete.css, which contains the necessary styling for the autocomplete itself, and only that. All class-selectors are namespaced with the "ac_"-prefix. Usually you can just use that and overwrite colors in your own stylesheet.

The package contains also other .css files, which are only for demo purposes.

Search Page Replacement

An autocomplete plugin can be used to search for a term and redirect to a page associated with a resulting item. The following is one way to achieve the redirect:

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
  formatItem: function(item) {
    return item.text;
  }
}).result(function(event, item) {
  location.href = item.url;
});