Description: Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Show
QuickNavExamplesOptionsMethodsExtension PointsEventsAny field that can receive input can be converted into an Autocomplete, namely, When typing in the autocomplete field, 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 source, see the documentation for the Keyboard interactionWhen the menu is open, the following key commands are available:
When the menu is closed, the following key commands are available:
ThemingThe autocomplete widget uses the jQuery UI CSS framework to style its look and feel. If autocomplete specific styling is
needed, the following CSS class names can be used for overrides or as keys for the
Dependencies
Additional Notes:
OptionsappendToDefault: Which element the menu should be appended to. When the value is Note: The Code examples: Initialize the autocomplete with the
Get or set the
autoFocusDefault: If set to Code examples: Initialize the autocomplete with the
Get or set the
classesDefault: Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the
learn article about the Code examples: Initialize the autocomplete with the
Get or set a property of the
delayDefault: The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive. Code examples: Initialize the autocomplete with the
Get or set the
disabledDefault: Disables the autocomplete if set to Code examples: Initialize the autocomplete with the
Get or set the
minLengthDefault: The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items. Code examples: Initialize the autocomplete with the
Get or set the
positionDefault: Identifies the position of the suggestions menu in relation to the associated input element. The Code examples: Initialize the autocomplete with the
Get or set the
sourceDefault: Defines the data to use, 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 Multiple types supported:
Code examples: Initialize the autocomplete with the
Get or set the
Methodsclose()Returns: jQuery (plugin only)Closes the Autocomplete menu. Useful in combination with the
Code examples: Invoke the close method:
destroy()Returns: jQuery (plugin only)Removes the autocomplete functionality completely. This will return the element back to its pre-init state.
Code examples: Invoke the destroy method:
disable()Returns: jQuery (plugin only)Disables the autocomplete.
Code examples: Invoke the disable method:
enable()Returns: jQuery (plugin only)Enables the autocomplete.
Code examples: Invoke the enable method:
instance()Returns: ObjectRetrieves the autocomplete's instance object. If the element does not have an associated instance, Unlike other widget methods,
Code examples: Invoke the instance method:
option( optionName )Returns: ObjectGets the value currently associated with the specified Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example,
Code examples: Invoke the method:
option()Returns: PlainObjectGets an object containing key/value pairs representing the current autocomplete options hash.
Code examples: Invoke the method:
option( optionName, value )Returns: jQuery (plugin only)Sets the value of the autocomplete option associated with the specified Note: For options that have objects as their value, you can set the value of just one
property by using dot notation for
Code examples: Invoke the method:
option( options )Returns: jQuery (plugin only)Sets one or more options for the autocomplete.
Code examples: Invoke the method:
search( [value ] )Returns: jQuery (plugin only)Triggers a
Code examples: Invoke the search method:
Extension PointsThe autocomplete widget is built with the widget factory and can be extended. When extending widgets, you have the ability to override or add to the behavior of existing methods. The following methods are provided as extension points with the same API stability as the plugin methods listed above. For more information on widget extensions, see Extending Widgets with the Widget Factory. _renderItem( ul, item )Returns: jQueryMethod that controls the creation of each option in the widget's menu. The method must create a new
Code examples: Add the item's value as a data attribute on the
Eventschange( event, ui )Type: autocompletechangeTriggered when the field is blurred, if the value has changed.
Code examples: Initialize the autocomplete with the change callback specified:
Bind an event listener to the autocompletechange event:
close( event, ui )Type: autocompletecloseTriggered when the menu is hidden. Not every
Note: The Code examples: Initialize the autocomplete with the close callback specified:
Bind an event listener to the autocompleteclose event:
create( event, ui )Type: autocompletecreateTriggered when the autocomplete is created.
Note: The Code examples: Initialize the autocomplete with the create callback specified:
Bind an event listener to the autocompletecreate event:
focus( event, ui )Type: autocompletefocusTriggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.
Code examples: Initialize the autocomplete with the focus callback specified:
Bind an event listener to the autocompletefocus event:
open( event, ui )Type: autocompleteopenTriggered when the suggestion menu is opened or updated.
Note: The Code examples: Initialize the autocomplete with the open callback specified:
Bind an event listener to the autocompleteopen event:
response( event, ui )Type: autocompleteresponseTriggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom
Code examples: Initialize the autocomplete with the response callback specified:
Bind an event listener to the autocompleteresponse event:
search( event, ui )Type: autocompletesearchTriggered before a search is performed, after
Note: The Code examples: Initialize the autocomplete with the search callback specified:
Bind an event listener to the autocompletesearch event:
select( event, ui )Type: autocompleteselectTriggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.
Code examples: Initialize the autocomplete with the select callback specified:
Bind an event listener to the autocompleteselect event:
Examples:A simple jQuery UI Autocomplete
Demo:Using a custom source callback to match only the beginning of terms
Demo: |