JqueryUI Autocomplete

Autocomplete is a technique used in modern websites to suggest a list beginning with few character that user typed in text box. The user can select an item from the list to complete the word or sentence.

jQueryUI provides the autocomplete() method to create a list of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.

Syntax

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

• $(selector, context).autocomplete (options) Method
• $(selector, context).autocomplete ("action", params) Method

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

The autocomplete (options) method declares that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. The options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.

Syntax

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

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows:

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

$(selector, context).autocomplete ("action", params) Method

The autocomplete ("action", params) method can perform an action on the list of suggestions, such as show or hide. The action is specified as a String in the first argument (e.g., "close" to hide the list).

Syntax

$(selector, context).autocomplete ("action", params);

Example

   <script>
         $(function() {
            var dataSource = [
               "Java",
               "Boostrap",
               "C",
               "Bitspi",
            ];
            $( "#automplete" ).autocomplete({
               source: dataSource 
            });
         });
      </script>

     <div class="ui-widget">
         <input id="automplete">
     </div>