JQuery UI Autocomplete

If you go to google.com and search for anything you see that google gives you suggestions before you type complete search query. This suggestion feature is known as autocomplete in web development terms. It is a very handy way of suggesting the visitor of the website what they are looking for. It also helps avoid wrong inputs if you limit that user must select one of the values from the suggestions. JQuery UI autocomplete function allows developers to implement autocomplete feature in their applications.

Simply call autocomplete() function with or without optional parameters on any input element which you want to have autocomplete functionality. You also need to pass the list or the source from where this element takes suggestions as a parameter to autocomplete function. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Autocomplete</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
            var AllCars = [
               "Honda",
               "Toyota",
               "BMW",
               "Ford",
                "Suzuki",
                "McLaren"
            ];
            $( "#cars-input" ).autocomplete({
                
               source: AllCars
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Search Cars</p>
         <label for="cars-input">Tags: </label>
         <input id="cars-input">
      </div>
   </body>
</html>

Download Code Run Code

The above code contains an input element with id “cars-input”. If you look at the script, an array named “AllCars” contains names of different cars. This will serve as a value for the source parameter of the autocomplete() function. The autocomplete function has been called on the element with id “cars-input”. Now if you open the above page in browser and type any thing in the text box, you will see related suggestions pop-up in under the text box. This is how JQuery UI implements autocomplete feature.

Autocomplete with Optional Parameters

You can also pass additional optional parameters to the autocomplete() function to change the behavior of suggestions. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters delay and minLenght are passed to the autocomplete function. The minLenght specified number of characters to enter before suggestions pop-up. Similarly delay specifies the time in milliseconds after suggestions appear. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Autocomplete with Optional Parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
            var AllCars = [
               "Honda",
               "Toyota",
               "BMW",
               "Ford",
                "Suzuki",
                "McLaren"
            ];
            $( "#cars-input" ).autocomplete({
               minLength:2,   
               delay:1000,
               source: AllCars
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Search Cars</p>
         <label for="cars-input">Tags: </label>
         <input id="cars-input">
      </div>
   </body>
</html>

Download Code Run Code

<<< JQuery UI AccordionJQuery UI Button >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .