jQueryUI AutoComplete plugin

Filed Under: jQuery

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.

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


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

Comments

  1. Malla says:

    Hi Pankaj,

    Thanks for sharing u r wisdom through practical examples. Could you also share all the Sources in https://github.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages