Search within TutorialsPark

jQuery UI : AutoComplete Events

Learn how to use jQuery UI AutoComplete Methods to control autocomplete process.

jQuery UI : Auto Complete Widget

jQuery UI autocomplete feature can trigger multiple events, which can be used to trigger different functions.

Table : jQuery UI AutoComplete Events

Events Description
change Event is triggered when the focus leaves the input element after the value is changed.
close Event is created when the pop-up menu is closed.
create Event is triggered when the autocomplete is created
focus Event is triggered when an item in the pop-up menu gain the focus
open Event is triggered when the pop-up menu is displayed
search Event is triggered before the list of autocomplete items is generated or requested.
select Event is triggered when an item is selected from the menu

jQuery UI AutoComplete: Retrieving Details from Selected Items

jQuery UI gives additional details about an event via a second argument, called as ui.

For the events of focus , change and select jQuery UI gives the ui object an item property that returns an object which describes the selected or focused item from the pop-up menu.

In the demo below, the label property is displayed within the strong element.Properties are read from ui.item Object.

Example: jQuery UI - Search and Close Methods

Give it a TRY! » Note:jQuery UI creates objects with both labels and value properties even when you use a simple string array for the source.

jQuery UI Autocomplete: Overriding the Default Select Action

jQuery UI Autocomplete event select has an default action, which is to replace the content of the input element with value selected from the pop-up menu.But there is an option to either supress this action or supplement it.

In the demo, when the select event is triggered the ui argument is used to get the value of the selected item and set the value of the associated field, which in this case is zip Code

Example: jQuery UI - Overriding the Default Select Action

Give it a TRY! » Note: When you Select the City names, the zipcode is also selected.