Vous êtes sur la page 1sur 3

Autocomplete - a jQuery plugin

Usage:
======
$("selector").autocomplete(url [, options]);
Demo page (search for English bird names, type "com" for example):
==================================================================
http://www.dyve.net/jquery?autocomplete
Advice:
=======
Make sure that selector selects only one element, unless you really, really know
what you are doing.
Example:
========
$("#input_box").autocomplete("my_autocomplete_backend.php");
In the above example, Autocomplete expects an input element with the id "input_b
ox" to exist. When a user starts typing in the input box, the autocompleter will
request my_autocomplete_backend.php with a GET parameter named q that contains
the current value of the input box. Let's assume that the user has typed "foo"(w
ithout quotes). Autocomplete will then request my_autocomplete_backend.php?q=foo
.
The backend should output possible values for the autocompleter, each on a singl
e line. Output cannot contain the pipe symbol "|", since that is considered a se
parator (more on that later).
An appropiate simple output would be:
foo
fool
foot
footloose
foo fighters
food fight
Note that the autocompleter will present the options in the order the backend se
nds them.

Advanced options:
=================
You can pass advanced options as a JavaScript object, notation { name:value, ...
, name: value }
Example: $("#input_box").autocomplete("my_autocomplete_backend.php", { minChars:
3 });
These options are available:
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 ar
e LI elements).
loadingClass = (default value: "ac_loading")
The class for the input box while results are being fetched from the ser
ver.
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 autocompl
eter activates.
delay (default value: 400)
The delay in milliseconds the autocompleter waits after a keystroke to a
ctivate itself.
cacheLength (default value: 1)
The number of backend query results to store in cache. 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 queri
es. 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 increase
s 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.
matchContains = options.matchContains || 0;
Whether or not the comparison looks inside (i.e. does "ba" match "foo ba
r") the search results. Only important if you use caching.
mustMatch (default value: 0)
If set to 1 (true), the autocompleter will only allow results that are p
resented 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 res
ult 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 i
nput box contains "foo").
selectFirst (default value: false)
If this is set to true, the first autocomplete value will be automatical
ly selected on tab/return, even if it has not been handpicked by keyboard or mou
se action. If there is a handpicked (highlighted) result, that result will take
precedence.
selectOnly (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 even if it has not been handpicked by keyb
oard or mouse action. This overrides selectFirst.
formatItem (default value: none)
A JavaScript funcion that can provide advanced markup for an item. For e
ach row of results, this function will be called. The returned value will be dis
played inside an LI element in the results list. Autocompleter will provide 3 pa
rameters: the results row, the position of the row in the list of results, and t
he number of items in the list of results. See the source code of http://www.dyv
e.net/jquery?autocomplete for an example.
onItemSelect (default value: none)
A JavaScript funcion that will be called when an item is selected. The a
utocompleter will specify a single argument, being the LI element selected. This
LI element will have an attribute "extra" that contains an array of all cells t
hat the backend specified. See the source code of http://www.dyve.net/jquery?aut
ocomplete for an example.

More advanced options


=====================
If you want to do more with your autocompleter, you can change some options on t
he fly.
The autocompleter is accessed as an attribute of the input box.
Example:
$("#input_box").autocomplete("my_autocomplete_backend.php"); // Set the autocomp
leter
var ac = $("#input_box")[0].autocompleter; // A handle to our autocompleter
There are currently 2 functions that can be called to influence the behaviour at
run-time:
flushCache()
This flushes the cache.
setExtraParams(obj)
This sets the extra parameters of the autocompleter to obj (which should
be a JavaScript object, see above).
It's often wise to flush the cache after calling setExtraParameters.

Vous aimerez peut-être aussi