The jQuery UI autoComplete widget is employed offer the user suggestion whereas entering values among the input element. It helps the user enter data quickly and reduces error, thus speeding up the search method similarly as making it more efficient.
jQuery UI AutoComplete widget will be created by using the autocomplete method on an input element. The application of autocomplete method is similar to different methods, the only addition is that you would like a map object containing a value from the source setting.
The code below demonstrates by using a simple array containing names of
cities starting with C, suggestion begin to appear as shortly because the user indicator is set on the input element.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI : Create an AutoComplete Widget </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var Ccities = ["jQuery", "jQuery Mobile", "jQuery UI"];
$('#autoSuggest').autocomplete({
source: Ccities
})
});
</script>
</head>
<body>
<form>
<div class="ui-widget">
<label for="autoSuggest">Tutorials Related to jQuery: </label><input id="autoSuggest"/>
</div>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Objects as Data Source
jQuery UI Autocomplete widget can even be created by employing an array of an object rather than simply values in a string.Which allows a user to separate the label in the suggestions from the value inserted. When the array of an object is employed as a source, the autocomplete feature appearance 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. The code below demonstrates the using an array object as a data source as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI : Create an AutoComplete Widget with Array of Objects </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var cCities = [{label: "Chicago (USA)", value: "Chicago"},
{label: "Chennai (India)", value: "Chennai"},
{label: "Cambridge (England)", value: "Cambridge"},
{label: "Colombo (SriLanka)", value: "Colombo"}]
$('#autoSuggest').autocomplete({
source: cCities
})
});
</script>
</head>
<body>
<form>
<div class="ui-widget">
<label for="autoSuggest">Cities Starting with C: </label><input id="autoSuggest"/>
</div>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Configuring AutoComplete
The jQuery UI autoComplete feature has a number of settings which can be used to set up the numerous aspects of the autocomplete functionality.
| Settings |
Description |
| autoFocus |
If it is set to true then list the first item get focus and the default value is false. |
| appendTo |
Which set the element the pop-up menu should get appended to and the default element is the body. |
| delay |
When the set the delay in milliseconds after a keystroke after which the autoComplete suggestion data is updated and the default value is false. |
| disabled |
When it is set to true when the auto complete feature is disabled and a default value is true. |
| source |
To set the source of items to be added to auto-completion menu and no default value is available |
The jQuery UI autocomplete widget is provided with a truly customized source for autocomplete entries by using a operate as a value for the source setting The specified function is executed each time an input is provided within the autocompletion box, the function accepts 2 arguments. A first argument is an object with one property known as a term.It is the text string the entered by the user The second argument is the function which is named when you have generated the list of autocomplete items to be displayed to the user. The code below demonstrates the using function as the data source.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI : Create an AutoComplete Widget using a Function </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var cCities = ["jQuery", "jQuery Mobile", "jQuery UI"
];
$('#autoSuggest').autocomplete({
source: function(request, response) {
var term = request.term;
var pattern = new RegExp("^" + term, "i");
var output = $.map(cCities, function(elem) {
if (pattern.test(elem)) {
return elem;
}
})
response(output);
}
})
});
</script>
</head>
<body>
<form>
<div class="ui-widget">
<label for="autoSuggest">Tutorials Related to jQuery: </label><input id="autoSuggest"/>
</div>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Introduction 
Objects as Data Source
jQuery UI Autocomplete widget can even be created by employing an array of an object rather than simply values in a string.Which allows a user to separate the label in the suggestions from the value inserted. When the array of an object is employed as a source, the autocomplete feature appearance 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. The code below demonstrates the using an array object as a data source as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI : Create an AutoComplete Widget with Array of Objects </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var cCities = [{label: "Chicago (USA)", value: "Chicago"},
{label: "Chennai (India)", value: "Chennai"},
{label: "Cambridge (England)", value: "Cambridge"},
{label: "Colombo (SriLanka)", value: "Colombo"}]
$('#autoSuggest').autocomplete({
source: cCities
})
});
</script>
</head>
<body>
<form>
<div class="ui-widget">
<label for="autoSuggest">Cities Starting with C: </label><input id="autoSuggest"/>
</div>
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Configuring AutoComplete
The jQuery UI autoComplete feature has a number of settings which can be used to set up the numerous aspects of the autocomplete functionality.
