How to use Jquery Autocomplete


The following example shows the usage of autocomplete functionality in Jquery. copy this code into your html editor and save it.

Then run the html page. Once you type the letter "a" you will be seeing the options which can be selected for autocomplete.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery Autocomplete functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            var availableLanguages = [
               "Java",
               "Visual Basic",
               "Oracle",
               "C++",
            ];
            $( "#automplete1" ).autocomplete({
               source: availableLanguages
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML -->
      <div class="ui-widget">
         <p>Type input</p>
         <label for="automplete1">Programming Languages: </label>
         <input id="automplete1">
      </div>
   </body>
</html>