jQuery UI Autocomplete

Autocomplete mechanism is frequently used in modern websites to provide the users a list of suggestion while typing the beginning word in the text box. It facilitates the user to select an item from the list, which will be displayed in the input field. This feature prevents the users from having to enter an entire word or a set of words.

jQueryUI provides an autocomplete widget to facilitates users by giving a list of suggestions to type in a text box. It is a control that acts a lot like a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control.

Syntax:

You can use the autocomplete() method in two forms:

First Method

The autocomplete (options) method specifies that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. Here the options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one options, you will have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

jQuery UI autocomplete() example 1

Let's take a simple example to demonstrate the autocomplete widget functionality, passing no parameters to the autocomplete() method.

jQuery UI autocomplete() method example 2

Use autoFocus in jQueryUI autocomplete () method:

Let's take an example to demonstarte the usage of option autoFocus in the autocomplete method.

jQuery UI autocomplete() method example 3

Use of minLength and delay in jQueryUI autocomplete () method:

Let's take an example to demonstrate the usage of two options minLength and delay in jQueryUI autocomplete() method.

jQuery UI autocomplete() method example 4

Use of lable in jQueryUI autocomplete () method:

Let's take an example to demonstrate the usage of option label in the autocomplete widget of jQueryUI: