jQuery Autocomplete

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

This plugin is nowjQuery UIpart of, and the standalone version will no longer be updated. The current version is 1.6.

VisitjQuery Autocomplete official website, download the jQuery Autocomplete plugin.

For more details about Autocomplete, please refer to the API documentationAutocomplete Widget。

Examples

jQuery Autocomplete plugin 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 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.html">
  <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>

Other extensions