jQuery UI Autocomplete

To provide the users a list of suggestions while typing the beginning word in the text box, the Autocomplete mechanism is used. It is commonly used in modern websites. It is very useful when it is required to select an item from a list, to be displayed in the input field. The user thus doesn’t need to enter an entire word or set of words. With an autocomplete widget, the jQueryUI facilitates the users by giving a list of suggestions to type in a text box. It is like a control. To present only those that match what the user is typing into control, it acts a lot like a <select> dropdown but with filtered choices.

Syntax:

The autocomplete() method can be used in two forms:

$(selector, context).autocomplete (options) Method

OR

$(selector, context).autocomplete (“action”, params) Method

First Method:

To specify that an HTML <input> element needs to be managed as an input field to be displayed above a list of suggestions, autocomplete (options) method is used. The behavior of the list of suggestions when the user is typing in the input field, is specified by the options parameter which is an object.

Syntax:

$(selector, context).autocomplete (options);

Multiple options can also be used at a time using JavaScript objects. The options need to be separated using a comma for this.

Syntax:

$(selector, context).autocomplete({option1: value1, option2: value2..... });

The various options that can be used with this method are listed below:

Option Uses
appendTo To append an element to the menu. The default value is null.
autoFocus To automatically focus the first item of the menu when the menu is shown, when set to TRUE. The default value is FALSE.
delay To define the time delay in milliseconds to wait before trying to obtain the matching values (as specified by the source option). The default value is 300.
disabled To disable the autocomplete widget initially, when set to true. The default value is false.
minlength To define the number of characters that must be entered before trying to obtain the matching values (as specified by the source option). The default value is 1.
position To identify the position of the suggestions menu according to the input element. The default value is { my: “left top”, at: “left bottom”, collision: “none” }.
source To define the manner in which the data that matches the input data is obtained. A value needs to be provided or the autocomplete widget won’t be created. The default value is none which must be specified.

Example 1:

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Autocomplete - Default functionality</title>  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="/resources/demos/style.css">  
  <script>  
  $(function() {  
    var Flowers = [  
      "Lily",  
      "Lotus",  
      "Tulip",  
      "Crocus",  
      "Hyacinth",  
      "Daisy",  
      "Dandelion",  
      "Orchid",  
      "Cherry blossom",  
      "Rose",  
      "Bluebell",  
      "Sunflower",  
      "Daffodil",    
    ];  
    $( "#flower" ).autocomplete({  
      source: Flowers  
    });  
  });  
  </script>  
</head>  
<body>  
<div class="ui-widget">  
 <p>Favourite Flower:</p>  
  <label for="flower">Flower: </label>  
  <input id="flower">  
</div>  
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the autocomplete widget functionality. Here, we are passing no parameters to the autocomplete() method.

Example 2:

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Autocomplete - Default functionality</title>  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="/resources/demos/style.css">  
  <script>  
  $(function() {  
    var Flowers = [  
      "Lily",  
      "Lotus",  
      "Tulip",  
      "Crocus",  
      "Hyacinth",  
      "Daisy",  
      "Dandelion",  
      "Orchid",  
      "Cherry blossom",  
      "Rose",  
      "Bluebell",  
      "Sunflower",  
      "Daffodil",    
    ];  
    $( "#flower" ).autocomplete({  
      source: Flowers 
autofocus: true   
    });  
  });  
  </script>  
</head>  
<body>  
<div class="ui-widget">  
 <p>Favourite Flower:</p>  
  <label for="flower">Flower: </label>  
  <input id="flower">  
</div>  
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage and behavior of the option autoFocus in the autocomplete method.

Example 3:

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Autocomplete - Default functionality</title>  
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <link rel="stylesheet" href="/resources/demos/style.css">  
  <script>  
  $(function() {  
    var Flowers = [  
      "Lily",  
      "Lotus",  
      "Tulip",  
      "Crocus",  
      "Hyacinth",  
      "Daisy",  
      "Dandelion",  
      "Orchid",  
      "Cherry blossom",  
      "Rose",  
      "Bluebell",  
      "Sunflower",  
      "Daffodil",    
    ];  
    $( "#flower" ).autocomplete({  
      source: Flowers, 
      minLength:2,     
      delay:100    
    });  
  });  
  </script>  
</head>  
<body>  
<div class="ui-widget">
  <p>Type the first two letters</p>
 <p>Favourite Flower:</p>  
  <label for="flower">Flower: </label>  
  <input id="flower">  
</div>  
</body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage and behavior of the options minLength and delay in jQueryUI autocomplete() method.

Example 4:

<!doctype html>  
<html lang="en">  
   <head>  
      <meta charset="utf-8">  
      <title>jQuery UI Autocomplete functionality</title>  
      <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
      <!-- Javascript -->  
      <script>  
         $(function() {  
            $( "#autocomp" ).autocomplete({  
               source: [  
                  { label: "Daisy", value: "DAS" },  
                    { label: "Dandelion", value: "DAD" },  
                      { label: "Daffodil", value: "DAF" },  
                        { label: "Dahlia", value: "DAH" },  
                  { label: "Desert Rose", value: "DER" }  
               ]  
            });  
         });  
      </script>  
   </head>  
   <body>  
      <!-- HTML -->   
      <div class="ui-widget">  
         <p>Favourite Flower:</p> 
         <input id="autocomp">  
      </div>  
   </body>  
</html>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the usage and behavior of the option label in the autocomplete widget of jQueryUI.

Please Share