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 WidgetGive 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 SourceGive 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
|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.