jQuery Autocomplete


jQuery Autocomplete

jQuery Autocomplete plugin searches and filters based on user-entered values, allowing users to quickly find and select from a list of preset values. By giving focus to an Autocomplete field or typing characters into it, the plug-in starts searching for matching entries and displays a list of values ​​to choose from. By entering more characters, the user can filter the list for better matches.

The plugin is now part of jQuery UI, and the independent version will not be updated. The current version is 1.6.

Visit the jQuery Autocomplete official website and download the jQuery Autocomplete plug-in.

For more details about Autocomplete, please view the API documentation Autocomplete Widget.

Example demonstration

jQuery Autocomplete plug-in demonstration.

Instance

<!doctype html>
<html>
<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 src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <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>

Run instance»

Click the "Run instance" button to view the online instance