From jQuery JavaScript Library
« Back to Plugins/AutoComplete
$("input.autocomplete").autocomplete( options )
Makes the selected input an autocompleter.
Matches the value of an input field against a JSON dataset as user types. The behavior of the autocomplete list is similar to that of Google Suggest. A JSON dataset can be preloaded or retrieved via a getJSON request to a given url. By default, the dataset is assumed to be an array of strings, the autocomplete list will show each string as a seperate list item in an unordered list, and the input's value will be set to the selected string when a selection is made.
The presentation of each list item and the input field value that is set when an item is selected can be customized. This allows more complex JSON datasets to be used (please see examples).
The autocomplete list responds to keyboard and mouse. Hovering changes the hilighted object and clicking makes the selection. Enter will make also selection; Up, Down, or Tab will change the highlighted item; and Esc will cancel the autocomplete and reset the input to its original value.
Custom events will be triggered when a list item is selected or the autocomplete list is cancelled without making a selection, allowing for custom callbacks to be bound to these events (See examples).
Arguments:| options | Options | |
|---|
| A set of key/value pairs that configure the autocompleter. All options are optional. |
Options:| Name | Type |
|---|
| list | Array | |
|---|
| autocomplete will be preloaded with this dataset. By default an array of strings is expected. |
| ajax | String | |
|---|
| The url that autocomplete will use to retrieve the dataset with getJSON. The current value of the input field will be passed to the request as the val parameter. |
| timeout | Integer | Default: 1000 |
|---|
| The number of milliseconds to wait after typing has ended
before getting the list. |
| getList | Function | |
|---|
| The function that retrieves the completion list. See the examples for the correct syntax. |
| template | Function | |
|---|
| Defines how an item is displayed in the completion list. Wraps the item in a li tag by default. |
| insertText | Function | |
|---|
| Defines how the selected item gets converted into text to be added to the input box. |
| match | Function | |
|---|
| The function that defines whether the item object matches the typed text. |
| wrapper | String | Default: "<ul class='jq-ui-autocomplete'></ul>" |
|---|
| The wrapper around the entire list. Defaults to a ul of class "jq-autocomplete". |
Examples:| Name | Type |
|---|
Makes an input element an autocompleter, passes in a list of autocomplete options, and binds a callback to the custom activate event.
$("input.autocomplete").autocomplete({ list: ["hello", "hello person", "goodbye"]})
.bind("activate.autocomplete", function(e,d) { alert(d) })
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input.autocomplete").autocomplete({ list: ["hello", "hello person", "goodbye"]})
.bind("activate.autocomplete", function(e,d) { alert(d) })
});
</script>
<style>
ul.jq-ui-autocomplete {
position: absolute;
overflow: hidden;
background-color: #fff;
border: 1px solid #aaa;
margin: 0px;
padding: 0;
list-style: none;
font: normal .75em/.75em Verdana, Arial, sans-serif;
color: #333;
}
ul.jq-ui-autocomplete li {
display: block;
padding: .3em .5em .3em .3em;
overflow: hidden;
width: 100%;
}
ul.jq-ui-autocomplete li.active {
background-color: #3875d7;
color: #fff;
} </style>
</head>
<body>
<input class="autocomplete"/>
<script src="jquery.ui.autocomplete.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
</body>
</html>
Autocomplete with simple preloaded dataset.
$('input#autocomplete').autocomplete({list: ["foo", "football", "foobar"]});
Autocomplete with more complex preloaded dataset. Uses the name property of each object for the list item and the input value and matches from the beginning of the name, case insensitive.
var users = [{"name": "foo", "id": 1 },
{"name": "football", "id": 2 },
{"name": "foobar", "id": 3 }];
$('input#autocomplete').autocomplete({
list: users,
match: function(typed) { return this.name.match(new RegExp("^"+typed, "i")); },
insertText: function(user) { return user.name },
template: function(user) { return "<li>"+user.name+"</li>"}
});
Autocomplete with simple Ajax driven dataset. The returned JSON would be an array of strings.
$('input#autocomplete').autocomplete({ajax: "users.js"});
