Jquery autocomplete options

Available options

These options are available:

url

default value: none

The url that will be called to provide autocompletion results. If you do not specify this, be sure to specify local data using data.

data

default value: none

Local data for autocompleter. Either provide an array with values or an array of arrays.

Example (array)

data: [ "apple", "apricot", "pear" ]

Example (array of arrays)

data: [ ['apple', 1], ['apricot', 2], ['pear', 3], ['prume', 4] ]

paramName

default value: "q"

The name of the GET parameter that will hold the value of the input element. If you set this to false the autocompleter will add the value of the input field directly to the url.

inputClass

default value: "ac_input"

This class will be added to the input box.

resultsClass

default value: "ac_results"

The class for the UL that will contain the result items (result items are LI elements).

loadingClass

default value: "ac_loading"

The class for the input box while results are being fetched from the server.

lineSeparator

default value: "\n"

The character that separates lines in the results from the backend.

cellSeparator

default value: "|"

The character that separates cells in the results from the backend.

minChars

default value: 1

The minimum number of characters a user has to type before the autocompleter activates.

delay

default value: 400

The delay in milliseconds the autocompleter waits after a keystroke to activate itself.

maxCacheLength

default value: 10

The number of backend query results to store in cache. The higher this number, the more memory the autocompleter will use, but the less HTTP duplicate requests it will make. If set to 1 (the current result), no caching will happen. Do not set below 1.

matchSubset

default value: 1

Whether or not the autocompleter can use a cache for more specific queries. This means that all matches of "foot" are a subset of all matches for "foo". Usually this is true, and using this options decreases server load and increases performance. Remember to set cacheLength to a bigger number, like 10.

matchCase

default value: 0

Whether or not the comparison is case sensitive. Only important only if you use caching.

matchInside

default value: false

Whether or not the comparison looks inside (i.e. does "ba" match "foo bar") the search results. Only important if you use caching.

matchStringConvertor

default value: null

A function that processes a string before comparison. It is called for both the user input and the value it is compared against. This could for example be used to implement accent folding.

mustMatch

default value: 0

If set to 1 (true), the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box. In the example at the beginning of this documentation, typing "footer" would result in an empty input box.

extraParams

default value: {}

Extra parameters for the backend. If you were to specify { bar:4 }, the autocompleter would call my_autocomplete_backend.php?q=foo&bar=4 (assuming the input box contains "foo").

selectFirst

default value: false

If this is set to true, the first autocomplete value will be automatically selected.

selectOnly (currently not working)

default value: false

If this is set to true, and there is only one autocomplete when the user hits tab/return, it will be selected. This overrides selectFirst.

showResult

default value: none

A JavaScript funcion that can provide advanced markup for an item. For each row of results, this function will be called. The returned value will be displayed inside an LI element in the results list. The function can take up to 2 arguments. The first argument will be the autocompleted text, the second an array of all cells that the backend specified.

showResult: function(value, data) {
        return '<span style="color:red">' + value + '</span>';
}

onItemSelect

default value: none

A JavaScript funcion that will be called when an item is selected. The function can take up to 2 arguments. The first argument will be the autocompleted text, the second an array of all cells that the backend specified.

onItemSelect: function(item) {
    var text = 'You selected <b>' + item.value + '</b>';
    if (item.data.length) {
        text += ' <i>' + item.data.join(', ') + '</i>';
    }
    $("#last_selected").html(text);
}