jQuery Autocomplete

jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。

该插件现在是 jQuery UI 的一部分，独立的版本不会再更新了。目前版本是 1.6。

访问 jQuery Autocomplete 官网，下载 jQuery Autocomplete 插件。

如需了解更多有关 Autocomplete 的细节，请查看 API 文档 自动完成部件（Autocomplete Widget）。

实例演示

jQuery Autocomplete 插件演示。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI Autocomplete - Default functionality</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     var availableTags = [
  13.       "ActionScript",
  14.       "AppleScript",
  15.       "Asp",
  16.       "BASIC",
  17.       "C",
  18.       "C++",
  19.       "Clojure",
  20.       "COBOL",
  21.       "ColdFusion",
  22.       "Erlang",
  23.       "Fortran",
  24.       "Groovy",
  25.       "Haskell",
  26.       "Java",
  27.       "JavaScript",
  28.       "Lisp",
  29.       "Perl",
  30.       "PHP",
  31.       "Python",
  32.       "Ruby",
  33.       "Scala",
  34.       "Scheme"
  35.     ];
  36.     $( "#tags" ).autocomplete({
  37.       source: availableTags    });
  38.   });
  39.   </script></head><body>
  40.  <div class="ui-widget">
  41.   <label for="tags">Tags: </label>
  42.   <input id="tags"></div>
  44.  </body>
  45. </html>

提示：在Autocomplete中有一个非常重要的属性参数：source，它表示用于自动完成功能的数据集合。