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
|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 MethodsGive 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