1. Home
  2. jQuery Autocomplete

The best jQuery Autocomplete Tutorial In 2024, In this tutorial you can learn Examples Demo,

jQuery Autocomplete

jQuery Autocomplete plugin search and filter value based on user input, allowing users to quickly find and select from a list of preset values. By giving Autocomplete focus or field in which you enter characters, the plug began to search for a matching entry and display a list of alternative values. By entering more characters, the user can filter the list to get a better match.

The plug-in is now jQuery UI part of the stand-alone version will not be updated. The current version is 1.6.

Access jQuery Autocomplete official website , download the jQuery Autocomplete plugin.

For more details about the Autocomplete, see the API documentation automatically member (Autocomplete the Widget) .

Examples Demo

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

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery Autocomplete
10/30