Documentation

Plugins/Autocomplete/autocomplete

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Plugins/Autocomplete

autocomplete( url or data, [options] )

Makes an input or textarea autocompleteable.
The first argument can be an URL for remote data or an an array for local data.

For remote data: When the user starts typing, a request is send to the specified backend ("my_autocomplete_backend.php"), with a GET parameter named q that contains the current value of the input box and a parameter "limit" with the value specified for the max option.

A value of "foo" would result in this request url: my_autocomplete_backend.php?q=foo&limit=10

The result must return with one value on each line. The result is presented in the order the backend sends it.

Formatting options:

Remote options:
Arguments:
url or dataString, Array
An URL pointing at a remote resource or local data as an array.
options (Optional)Options
A set of key/value pairs that configure the autocomplete. All options are optional.


Options:


NameType
autoFillBooleanDefault: false
Fill the textinput while still selecting a value, replacing the value if more is typed or something else is selected.
cacheLengthNumberDefault: 10
The number of backend query results to store in cache. If set to 1 (the current result), no caching will happen. Must be >= 1.
delayNumberDefault: 400 for remote, 10 for local
The delay in milliseconds the autocompleter waits after a keystroke to activate itself.
extraParamsObject
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"). The param can be a function that is called to calculate the param before each request.
formatItemFunctionDefault: Assumes that a single row contains a single value.
Provides 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. Autocompleter will provide 4 parameters: the results row, the position of the row in the list of results (starting at 1), the number of items in the list of results and the search term.
formatMatchFunctionDefault: formatItem is used
Use this option if you want to limit the data that autocomplete searches for matches. For example, there may be items you want displayed to the user, but don't want included in the data that's searched. Gets called with the same arguments as formatItem.
formatResultFunctionDefault: Assumes either plain data to use as result or uses the same value as provided by formatItem.
Similar to formatItem, but provides the formatting for the value to be put into the input field. Again three arguments: Data, position (starting with one) and total number of data.
highlightBoolean, FunctionDefault: Wraps the search term in a <strong> element
Whether and how to highlight matches in the select box. Set to false to disable. Set to a function to customize. The function gets the value as the first argument and the search term as the second and must return the formatted value.
matchCaseBooleanDefault: false
Whether or not the comparison is case sensitive. Important only if you use caching.
matchContainsBooleanDefault: false
Whether or not the comparison looks inside (i.e. does "ba" match "foo bar") the search results. Important only if you use caching. Don't mix with autofill.
matchSubsetBooleanDefault: true
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. Only useful with cacheLength settings bigger than one, like 10.
maxNumberDefault: 10
Limit the number of items in the select box. Is also sent as a "limit" parameter with a remote request.
minCharsNumberDefault: 1
The minimum number of characters a user has to type before the autocompleter activates.
multipleBooleanDefault: false
Whether to allow more than one autocompleted-value to enter.
multipleSeparatorStringDefault: " " (space)
Seperator to put between values when using multiple option.
mustMatchBooleanDefault: false
If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box.
scrollBooleanDefault: true
Whether to scroll when more results than configured via scrollHeight are available.
scrollHeightNumberDefault: 180
height of scrolled autocomplete control in pixels
selectFirstBooleanDefault: true
If this is set to true, the first autocomplete value will be automatically selected on tab/return, even if it has not been handpicked by keyboard or mouse action. If there is a handpicked (highlighted) result, that result will take precedence.
widthNumberDefault: width of the input element
Specify a custom width for the select box.