jQuery - Widget AutoComplete

Description

The Widget AutoComplete function can be used with widgets in JqueryUI.The Autocomplete widgets provides suggestions while you type into the field.For suppose give Ja as an input, it will provides an output as Java or JavaScript.

Syntax

Here is the simple syntax to use Autocomplete −

$( "#tags" ).autocomplete({
   source: availableTags
});

Example

Following is a simple example showing the usage of Autocomplete −

Live Demo

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete - Default functionality</title>
		
      <link rel = "stylesheet" 
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
  
      <script>
         $(function() {
            var availableTags = [
               "ActionScript",
               "AppleScript",
               "Asp",
               "BASIC",
               "C",
               "C++",
               "Clojure",
               "COBOL",
               "ColdFusion",
               "Erlang",
               "Fortran",
               "Groovy",
               "Haskell",
               "Java",
               "JavaScript",
               "Lisp",
               "Perl",
               "PHP",
               "Python",
               "Ruby",
               "Scala",
               "Scheme"
            ];
				
            $( "#tags" ).autocomplete({
               source: availableTags
            });
				
         });
      </script>
   </head>

   <body>
      <div class = "ui-widget">
         <label for = "tags">Tags: </label>
         <input id = "tags">
      </div>
 
   </body>
</html>

This will produce following result −

jquery-widgets.htm