jQueryUI AutoComplete plugin With Examples [Latest]

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.

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.

Options	Syntax	Description
appendTo	$( “.selector” ).autocomplete({ appendTo: “#someElement” });	Used to append an element to the menu.
autoFocus	$( “.selector” ).autocomplete({ autoFocus: true });	First item in the menu will be automatically focused if it is set to true.
delay	$( “.selector” ).autocomplete({ delay: 400 });	An integer value in milliseconds which denotes the time wait before finding the matching values.
disabled	$( “.selector” ).autocomplete({ disabled: true });	Setting to true will disable the autocomplete.
minLength	$( “.selector” ).autocomplete({ minLength: 0 });	An integer value representing the number of characters to type before finding the matching values.
position	$( “.selector” ).autocomplete({ position: { my : “right top”, at: “right bottom” } });	This option is used to identify the position of autocomplete suggestions menu in relation to the associated input field.
source	$( “.selector” ).autocomplete({ source: [some array] });	This option must be specified which defines the data to use for the autocomplete menu.

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.

Methods	Usage	Description
close()	$( “.selector” ).autocomplete( “close” );	This method is used to close the autocomplete menu.
destroy()	$( “.selector” ).autocomplete( “destroy” );	This method will completely remove the autocomplete functionality.
disable()	$( “.selector” ).autocomplete( “disable” );	This method is used to disable the autocomplete functionality.
enable()	$( “.selector” ).autocomplete( “enable” );	This method enables the autocomplete functionality.
instance()	$( “.selector” ).autocomplete( “instance” );	This method is used to get the autocomplete’s instance object
option( optionName, value )	$( “.selector” ).autocomplete( “option”, “disabled”, true );	This method is used to set the value of the autocomplete option associated with the optionName.
search(,[value ] )	$( “.selector” ).autocomplete( “search”, “” );	Triggers the search event using the input value.
widget()	$( “.selector” ).autocomplete( “widget” );	This method will return a jQuery object which contains the autocomplete menu element.

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.

Methods	Usage	Description
change( event, ui )	$( “.selector” ).autocomplete({,change: function( event, ui ) {}});	This event is fired when the value is changed and executes the callback function.
close( event, ui )	$( “.selector” ).autocomplete({,close: function( event, ui ) {}});	This is fired when the autocomplete menu is closed or hidden.
create( event, ui )	$( “.selector” ).autocomplete({,create: function( event, ui ) {}});	This is fired on creation of the autocomplete.
focus( event, ui )	$( “.selector” ).autocomplete({,focus: function( event, ui ) {}});	This is fired when an item in the menu is focused.
open( event, ui )	$( “.selector” ).autocomplete({,open: function( event, ui ) {}});	This is fired when the autocomplete option is opened or updated with matching values.
response( event, ui )	$( “.selector” ).autocomplete({,response: function( event, ui ) {}});	This event is fired after completing search operation.
search( event, ui )	$( “.selector” ).autocomplete({,search: function( event, ui ) {}});	This events fires before starting the search operation.
select( event, ui )	$( “.selector” ).autocomplete({,select: function( event, ui ) {}});	This event is fired when an item in the menu is selected.

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


&lt;!doctype html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;jQueryUI Autocomplete - Default Functionality&lt;/title&gt;
      &lt;link href="https://code.jquery.com/ui/1.10.4/themes/south-street/jquery-ui.css" rel="stylesheet"&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;
         $(function() {
            var countryNames = [
               "Australia",
               "Austria",
               "Bangladesh",
               "Chile",
               "China",
               "Denmark",
               "England",
               "France",
               "Finland",
               "Greece",
               "Germany",
               "Honkong",
               "India",
               "Japan",
               "kazakhstan",
               "USA",
               "Zimbabwe"
            ];
            $( "#automplete" ).autocomplete({
               source: countryNames
            });
         });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="ui-widget"&gt;
         &lt;label for="automplete"&gt;Country : &lt;/label&gt;
         &lt;input id="automplete"&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQueryUI Autocomplete - Default Functionality</title>

$(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>

<label for="automplete">Country : </label>

</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


&lt;!doctype html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;jQueryUI Autocomplete - Default Functionality&lt;/title&gt;
      &lt;link href="https://code.jquery.com/ui/1.10.4/themes/south-street/jquery-ui.css" rel="stylesheet"&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;
         $(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" })
         });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="ui-widget"&gt;
         &lt;label for="automplete"&gt;Country: &lt;/label&gt;
         &lt;input id="automplete"&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQueryUI Autocomplete - Default Functionality</title>

$(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>

<label for="automplete">Country: </label>

</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.

jQueryUI AutoComplete plugin With Examples [Latest]

Byadmin

Contents

jQueryUI Autocomplete Plugin Options

jQueryUI Autocomplete Plugin Methods

jQueryUI Autocomplete Plugin Events

jQueryUI Autocomplete Plugin in Action

Default Functionality

Use of position Option

Like this:

By admin

Related Post

How to get an element with a specific index in jQuery With Example [Latest]

Find all the descendants of an element in jQuery With Example [Latest]

jQuery UI Button and Buttonset Widget With Examples [Latest]

Leave a ReplyCancel reply

You missed

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

How to Generate XML from XSD in Eclipse Example [Latest]

Queue Implementation in Java using Array With Examples [Latest]

Depth First Search (DFS) for a Graph With Examples [Latest]

Byadmin

Contents

jQueryUI Autocomplete Plugin Options

jQueryUI Autocomplete Plugin Methods

jQueryUI Autocomplete Plugin Events

jQueryUI Autocomplete Plugin in Action

Default Functionality

Use of position Option

Share this:

Like this:

By admin

Related Post

Leave a ReplyCancel reply

You missed