Jquery: Widget – Autocomplete


Basic syntax

$(selector, context).autocomplete (options);
appendTo Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front.
autoFocus If set to true the first item will automatically be focused when the menu is shown.
delay 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.
disabledDisables the autocomplete if set to true.
minLengthThe 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.
positionIdentifies the position of the suggestions menu in relation to the associated input element. The 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.


Basic syntax

$(selector, context).autocomplete ("action", params);
close()Closes the Autocomplete menu. Useful in combination with the search method, to close the open menu.
destroy()Removes the autocomplete functionality completely. This will return the element back to its pre-init state.
disable()Disables the autocomplete.
enable()Enables the autocomplete.
instance()Retrieves the autocomplete’s instance object. If the element does not have an associated instance, undefined is returned.
option( optionName )Gets the value currently associated with the specified optionName.
option()Gets an object containing key/value pairs representing the current autocomplete options hash.
option( optionName, value )Sets the value of the autocomplete option associated with the specified optionName.
option( options )Sets one or more options for the autocomplete.
search( [value ] )
Triggers a 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.
widget()Returns a jQuery object containing the autocomplete.


Event MethodDescription
change( event, ui )Triggered when the field is blurred, if the value has changed.
close( event, ui )Triggered when the menu is hidden. Not every close event will be accompanied by a change event.
create( event, ui )Triggered when the autocomplete is created.
focus( event, ui )Triggered when the 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.
open( event, ui )Triggered when the suggestion menu is opened or updated.
response( event, ui )Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required.
search( event, ui )Triggered before a search is performed, after minLength and delay are met. If canceled, then no request will be started and no items suggested.
select( event, ui )Triggered 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.

Extension Points

Extension PointDescription
_renderItem( ul, item )Method that controls the creation of each option in the widget’s menu. The method must create a new <li> element, append it to the menu, and return it. 
_renderMenu( ul, items )The method that controls building the widget’s menu. The method is passed an empty <ul> and an array of items that match the user typed term. Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.
_resizeMenu()Method responsible for sizing the menu before it is displayed. The menu element is available at this.menu.element.

Leave a Reply

Your email address will not be published. Required fields are marked *