Search within TutorialsPark

jQuery UI : AutoComplete Widget


Learn how to use jQuery UI AutoComplete Widget


jQuery UI : Auto Complete Widget

The jQuery UI Auto Complete Widget is used provide the user suggestion while entering values within the input element.

It helps the user enter data quickly and reduces error, thus speeding up the search process as well as making it more efficient.


jQuery UI : Creating a Basic AutoComplete Element

jQuery UI AutoComplete widget can be created by using the autocomplete method on an input element.

The application of autocomplete method is similar to other methods, the only addition is that you need a map object containing a value from the source setting.

In the demo below, we use a simple array containing names of cities beginning with C, suggestion begin to appear as soon as the user cursor is set on the input element.

Example: jQuery UI - Creating a Basic AutoComplete Widget

Give it a TRY! » Note:The user can continue to type the entry or select any suggestions from the autocomplete options.


jQuery UI Autocomplete: Using an array of objects as a Data Source

jQuery UI Autocomplete Widget can also be created by using a array of object instead of just values in a string.This allows you to seperate the label in the suggestions from the value inserted.

When the array of object is used as a source, the autocomplete feature looks for properties of label and value.

The label property is used to create the suggestion popup, if selected the value within the label is inserted within the input element.

Example: jQuery UI - Using an Array Object as Data Source

Give it a TRY! » Note: The name of countries are added as labels, which are not included as values.


jQuery UI AutoComplete : Configuring AutoComplete.

The jQuery UI autocomplete feature has a number of settings which can be used to configure the many aspects of the autocomplete functionality.

Table : jQuery UI AutoComplete Settings

Settings Description
appendTo To set the element that the pop-up menu should get appended to. Default element is body
autoFocus If set as true, the first list item gets the focus. Default is false
delay When set the delay in milliseconds after a keystroke after which the autocomplete suggestion data is updated. Default value is false
disabled When set to true, the autocomplete feature is disabled. Default value is false
minLength To set the minimum number of characters that needs to be entered before autocomplete popup is displayed. Default is 1
source To set the source of items to be added to autocompletion menu. It a Required, and no default is available.

jQuery UI AutoComplete : Using a Function as a Data Source.

The jQuery UI autocomplete widget can be provided with a truly customized source for autocomplete entries by using a function as a value for the source setting

The specifed function is executed every time an input is provided in the autocompletion box, the function accepts two arguments.

The first argument is an object with a single property called as term.It is the text string the entered by the user

The second argument is the function which is called when you have generated the list of autocomplete items to be displayed to the user.

Example: jQuery UI - Using the Function as a Data Source

Give it a TRY! » Note: The argument to the function is an array of strings or objects.