In this post, we will discuss about one of the useful plugins provided by jQuery to speed up the user interactions in your application, the Autocomplete plugin.
You can easily integrate the Autocomplete plugin in your application. This enables the users to easily search and filter items from an already populated list of items as they type on any input fields.
Contents
jQueryUI Autocomplete Plugin Options
In this section, we will discuss about different options available to customize the jQueryUI Autocomplete plugin. We have used many of these options in the jQueryUI Autocomplete Plugin in Action section.
The above table briefly describes the different options in Autocomplete plugin and its syntax.
jQueryUI Autocomplete Plugin Methods
In this section, we will look into the jQueryUI Autocomplete plugin methods and its syntax. These methods are very useful when you deal with the Autocomplete plugin.
This table briefly describes the methods used to customize the autocomplete plugin.
jQueryUI Autocomplete Plugin Events
In this section, we will discuss about different events associated with jQueryUI Autocomplete plugin.
The above table briefly describes the events associated with the autocomplete plugin.
jQueryUI Autocomplete Plugin in Action
In this section, we will try different examples to explore the uses of jQueryUI Autocomplete plugin.
Default Functionality
The following example demonstrates the default functionality of the Autocomplete plugin. You will find suggestions as you start typing on the input field.
autocomplete-default.html
<!doctype html>
<html>
<head>
<title>jQueryUI Autocomplete - Default Functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/south-street/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var countryNames = [
"Australia",
"Austria",
"Bangladesh",
"Chile",
"China",
"Denmark",
"England",
"France",
"Finland",
"Greece",
"Germany",
"Honkong",
"India",
"Japan",
"kazakhstan",
"USA",
"Zimbabwe"
];
$( "#automplete" ).autocomplete({
source: countryNames
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="automplete">Country : </label>
<input id="automplete">
</div>
</body>
</html>
You can see this feature in action as you type on the input field shown below.
Use of position Option
The following example demonstrates the use of position option in the autocomplete plugin. In this example, you can see how position option is used to customize the autocomplete menu.
autocomplete-position.html
<!doctype html>
<html>
<head>
<title>jQueryUI Autocomplete - Default Functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/south-street/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var countryNames = [
"Australia",
"Austria",
"Bangladesh",
"Chile",
"China",
"Denmark",
"England",
"France",
"Finland",
"Greece",
"Germany",
"Honkong",
"India",
"Japan",
"kazakhstan",
"USA",
"Zimbabwe"
];
$( "#automplete" ).autocomplete({
source: countryNames
});
$( "#automplete" ).autocomplete("option", "position", { my : "right-10 top+40", at: "right top" })
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="automplete">Country: </label>
<input id="automplete">
</div>
</body>
</html>
You can see this feature in action as you type on the input field shown below. You may have noticed the change in position of the autocomplete menu in this demo.
I hope you understood the basic usage of the autocomplete plugin. You can try using the available options, methods and events to customize the autocomplete plugin.
That’s all for now and we will see some more jQuery plugins in the coming posts.