Documentation

UI/Autocomplete/autocomplete

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Autocomplete

autocomplete( options )

Make the selected elements Autocomplete.
Arguments:
optionsOptions
A set of key/value pairs that configure the autocomplete. All options are optional.


Options:

NameType
urlString
A URL pointing at a remote resource.
dataArray
Local data as an array. Note: this does not seem to work - instead pass the data array as the single or first parameter eg $('.hello').autocomplete(['red','green','blue'], {minChars:0})
minCharsNumberDefault: 1
The minimum number of characters a user has to type before the autocompleter activates.
delayNumberDefault: 400 for remote, 10 for local
The delay in milliseconds the autocompleter waits after a keystroke to activate itself.
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.
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.
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.
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.
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.
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.
multipleBooleanDefault: false
Whether to allow more than one autocompleted-value to enter.
multipleSeparatorStringDefault: ", "
Separator to put between values when using multiple option.
widthNumberDefault: width of the input element
Specify a custom width for the select box.
autoFillBooleanDefault: false
Fill the textinput while still selecting a value, replacing the value if more is typed or something else is selected.
maxNumberDefault: 10
Limit the number of items in the select box. Is also sent as a "limit" parameter with a remote request.
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.
scrollBooleanDefault: true
Whether to scroll when more results than configured via scrollHeight are available.
scrollHeightNumberDefault: 180
height of scrolled autocomplete control in pixels


autocomplete( "result", handler )

Handle the result of a search event.
Is executed when the user selects a value or a programmatic search event is triggered (see 'search'). You can add and remove (using unbind("result")) this event at any time.
Arguments:
"result"String
handlerFunction
The event handler, gets a default event object as first and the selected list item as second argument.

Examples:

Bind a handler to the result event to display the selected value in a #result element. The first argument is a generic event object, in this case with type "result". The second argument refers to the selected data, which can be a plain string value or an array or object. The third argument is the formatted value that is inserted into the input field.

$('input#suggest').autocomplete("result",function(event, data, formatted) {
 $("#result").html( !data ? "No match!" : "Selected: " + formatted);
});

NameType


autocomplete( "search" )

Trigger a search event.
See 'result' for binding to that event.

A search event mimics the same behaviour as when the user selects a value from the list of autocomplete items. You can use it to execute anything that does something

with the selected value, beyond simply putting the value into the input and submitting it.
Arguments:
"search"String

autocomplete( "flushCache" )

Flush (empty) the cache of matched input's autocompleters.
Arguments:
"flushCache"String

autocomplete( "setData", options )

Updates the options for the current autocomplete field.
This allows you to change things like the URL, max items to display, etc. If you're changing the URL, be sure to call the 'flushCache' method.
Arguments:
"setData"String
optionsOptions
The options to set.

autocomplete( "destroy" )

Completely remove the autocomplete.
This method removes the autocomplete completely.
Arguments:
"destroy"String