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:

OptionDescription
appendToThis option is used append an element to the menu. By default its value is null.
autoFocusIf you set this option as TRUE, the first item of the menu will automatically be focused when the menu is shown. By default its value is FALSE.
delayThis option specifies the time delay in milliseconds to wait before trying to obtain the matching values (as specified by the source option). By default its value is 300.
disabledIf you set this option as true, the autocomplete widget is initially disabled. By default its value is false.
minlengthIt specifies the number of characters that must be entered before trying to obtain the matching values (as specified by the source option). By default its value is 1.
positionThis option identifies the position of the suggestions menu iaccording to the input element. By default its value is { my: "left top", at: "left bottom", collision: "none" }.
sourceThis option specifies the manner in which the data that matches the input data is obtained. You must have to provide a value or the autocomplete widget won?t be created. By default its value is none; must be specified.

jQuery UI autocomplete() example 1

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

Test it Now

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.

Test it Now

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.

Test it Now

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:

Test it Now



Latest Courses