Easy Tutorial
❮ Jquery Examples Misc Removedata ❯

jQuery Autocomplete

The jQuery Autocomplete plugin searches and filters based on user input, allowing users to quickly find and select from a pre-set list of values. By giving focus to the Autocomplete field or typing characters into it, the plugin begins 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 now part of jQuery UI, and the standalone version will no longer be updated. The current version is 1.6.

Visit the jQuery Autocomplete official website to download the jQuery Autocomplete plugin.

For more details about Autocomplete, please refer to the API documentation for the Autocomplete Widget.

Example Demonstration

Demonstration of the jQuery Autocomplete plugin.

<!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">
  <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>

View Demo

❮ Jquery Examples Misc Removedata ❯