Autocomplete Widgetversion added: 1.8
Description: Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
This can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.
You can pull data in from a local or remote source: Local is good for small data sets, e.g., an address book with 50 entries; remote is necessary for big data sets, such as a database with hundreds or millions of entries to select from. To find out more about customizing the data soure, see the documentation for the source
option.
Keyboard interaction
When the menu is open, the following key commands are available:
- UP - Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item.
- DOWN - Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item.
- ESCAPE - Close the menu.
- ENTER - Select the currently focused item and close the menu.
- TAB - Select the currently focused item, close the menu, and move focus to the next focusable element.
- PAGE UP/DOWN - Scroll through a page of items (based on height of menu). It's generally a bad idea to display so many items that users need to page..
When the menu is closed, the following key commands are available:
- UP/DOWN - Open the menu, if the
minLength
has been met.
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Options
appendToType: Selector
null
null
, the parents of the input field will be checked for a class of ui-front
. If an element with the ui-front
class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.Initialize the autocomplete with the appendTo option specified:
$( ".selector" ).autocomplete({ appendTo: "#someElem" }); |
Get or set the appendTo option, after initialization:
// getter var appendTo = $( ".selector" ).autocomplete( "option" , "appendTo" ); // setter $( ".selector" ).autocomplete( "option" , "appendTo" , "#someElem" ); |
autoFocusType: Boolean
false
true
the first item will automatically be focused when the menu is shown.Initialize the autocomplete with the autoFocus option specified:
$( ".selector" ).autocomplete({ autoFocus: true }); |
Get or set the autoFocus option, after initialization:
// getter var autoFocus = $( ".selector" ).autocomplete( "option" , "autoFocus" ); // setter $( ".selector" ).autocomplete( "option" , "autoFocus" , true ); |
delayType: Integer
300
Initialize the autocomplete with the delay option specified:
$( ".selector" ).autocomplete({ delay: 500 }); |
Get or set the delay option, after initialization:
// getter var delay = $( ".selector" ).autocomplete( "option" , "delay" ); // setter $( ".selector" ).autocomplete( "option" , "delay" , 500 ); |
disabledType: Boolean
false
true
.Initialize the autocomplete with the disabled option specified:
$( ".selector" ).autocomplete({ disabled: true }); |
Get or set the disabled option, after initialization:
// getter var disabled = $( ".selector" ).autocomplete( "option" , "disabled" ); // setter $( ".selector" ).autocomplete( "option" , "disabled" , true ); |
minLengthType: Integer
1
Initialize the autocomplete with the minLength option specified:
$( ".selector" ).autocomplete({ minLength: 0 }); |
Get or set the minLength option, after initialization:
// getter var minLength = $( ".selector" ).autocomplete( "option" , "minLength" ); // setter $( ".selector" ).autocomplete( "option" , "minLength" , 0 ); |
positionType: Object
{ my: "left top", at: "left bottom", collision: "none" }
of
option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.Initialize the autocomplete with the position option specified:
$( ".selector" ).autocomplete({ position: { my : "right top" , at: "right bottom" } }); |
Get or set the position option, after initialization:
// getter var position = $( ".selector" ).autocomplete( "option" , "position" ); // setter $( ".selector" ).autocomplete( "option" , "position" , { my : "right top" , at: "right bottom" } ); |
sourceType: Array or String or Function( Object request, Function response( Object data ) )
none; must be specified
Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source
option - look for one that matches your use case, and check out the code.
-
Array:
An array can be used for local data. There are two supported formats:
- An array of strings:
[ "Choice1", "Choice2" ]
- An array of objects with
label
andvalue
properties:[ { label: "Choice1", value: "value1" }, ... ]
value
properties, the value will also be used as the label. - An array of strings:
-
String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a
term
field, which the server-side script should use for filtering the results. For example, if thesource
option is set to"http://example.com"
and the user typesfoo
, a GET request would be made tohttp://example.com?term=foo
. The data itself can be in the same format as the local data described above. -
Function:
The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
- A
request
object, with a singleterm
property, which refers to the value currently in the text input. For example, if the user enters"new yo"
in a city field, the Autocomplete term will equal"new yo"
. - A
response
callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call theresponse
callback even if you encounter an error. This ensures that the widget always has the correct state.
When filtering data locally, you can make use of the built-in
$.ui.autocomplete.escapeRegex
function. It'll take a single string argument and escape all regex characters, making the result safe to pass tonew RegExp()
. - A
Initialize the autocomplete with the source option specified:
$( ".selector" ).autocomplete({ source: [ "c++" , "java" , "php" , "coldfusion" , "javascript" , "asp" , "ruby" ] }); |
Get or set the source option, after initialization:
// getter var source = $( ".selector" ).autocomplete( "option" , "source" ); // setter $( ".selector" ).autocomplete( "option" , "source" , [ "c++" , "java" , "php" , "coldfusion" , "javascript" , "asp" , "ruby" ] ); |
Methods
close()
search
method, to close the open menu.- This method does not accept any arguments.
Invoke the close method:
$( ".selector" ).autocomplete( "close" ); |
destroy()
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).autocomplete( "destroy" ); |
disable()
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).autocomplete( "disable" ); |
enable()
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).autocomplete( "enable" ); |
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).autocomplete( "option" , "disabled" ); |
option()Returns: PlainObject
- This method does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).autocomplete( "option" ); |
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).autocomplete( "option" , "disabled" , true ); |
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).autocomplete( "option" , { disabled: true } ); |
search( [value ] )
search
event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0
to display all items.-
valueType: String
Invoke the search method:
$( ".selector" ).autocomplete( "search" , "" ); |
widget()
jQuery
object containing the menu element. Although the menu items are constantly created and destroyed, the menu element itself is created during initialization and is constantly reused.- This method does not accept any arguments.
Invoke the widget method:
$( ".selector" ).autocomplete( "widget" ); |
Events
change( event, ui )Type: autocompletechange
-
eventType: Event
-
uiType: Object
-
itemType: jQueryThe item selected from the menu, if any. Otherwise the property is
null
.
-
Initialize the autocomplete with the change callback specified:
$( ".selector" ).autocomplete({ change: function ( event, ui ) {} }); |
Bind an event listener to the autocompletechange event:
$( ".selector" ).on( "autocompletechange" , function ( event, ui ) {} ); |
close( event, ui )Type: autocompleteclose
close
event will be accompanied by a change
event.Initialize the autocomplete with the close callback specified:
$( ".selector" ).autocomplete({ close: function ( event, ui ) {} }); |
Bind an event listener to the autocompleteclose event:
$( ".selector" ).on( "autocompleteclose" , function ( event, ui ) {} ); |
create( event, ui )Type: autocompletecreate
Initialize the autocomplete with the create callback specified:
$( ".selector" ).autocomplete({ create: function ( event, ui ) {} }); |
Bind an event listener to the autocompletecreate event:
$( ".selector" ).on( "autocompletecreate" , function ( event, ui ) {} ); |
focus( event, ui )Type: autocompletefocus
Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.
Initialize the autocomplete with the focus callback specified:
$( ".selector" ).autocomplete({ focus: function ( event, ui ) {} }); |
Bind an event listener to the autocompletefocus event:
$( ".selector" ).on( "autocompletefocus" , function ( event, ui ) {} ); |
open( event, ui )Type: autocompleteopen
Initialize the autocomplete with the open callback specified:
$( ".selector" ).autocomplete({ open: function ( event, ui ) {} }); |
Bind an event listener to the autocompleteopen event:
$( ".selector" ).on( "autocompleteopen" , function ( event, ui ) {} ); |
response( event, ui )Type: autocompleteresponse
source
option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled.-
eventType: Event
-
uiType: Object
-
contentType: ArrayContains the response data and can be modified to change the results that will be shown. This data is already normalized, so if you modify the data, make sure to include both
value
andlabel
properties for each item.
-
Initialize the autocomplete with the response callback specified:
$( ".selector" ).autocomplete({ response: function ( event, ui ) {} }); |
Bind an event listener to the autocompleteresponse event:
$( ".selector" ).on( "autocompleteresponse" , function ( event, ui ) {} ); |
search( event, ui )Type: autocompletesearch
minLength
and delay
are met. If canceled, then no request will be started and no items suggested.Initialize the autocomplete with the search callback specified:
$( ".selector" ).autocomplete({ search: function ( event, ui ) {} }); |
Bind an event listener to the autocompletesearch event:
$( ".selector" ).on( "autocompletesearch" , function ( event, ui ) {} ); |
select( event, ui )Type: autocompleteselect
Canceling this event prevents the value from being updated, but does not prevent the menu from closing.
Initialize the autocomplete with the select callback specified:
$( ".selector" ).autocomplete({ select: function ( event, ui ) {} }); |
Bind an event listener to the autocompleteselect event:
$( ".selector" ).on( "autocompleteselect" , function ( event, ui ) {} ); |
Examples:
Example: A simple jQuery UI Autocomplete
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title >autocomplete demo</ title > </ head > < body > < label for = "autocomplete" >Select a programming language: </ label > < input id = "autocomplete" > < script > $( "#autocomplete" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); </ script > </ body > </ html > |
Demo:
Example: Using a custom source callback to match only the beginning of terms
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < title >autocomplete demo</ title > </ head > < body > < label for = "autocomplete" >Select a programming language: </ label > < input id = "autocomplete" > < script > var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]; $( "#autocomplete" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( tags, function( item ){ return matcher.test( item ); }) ); } }); </ script > </ body > </ html > |