jQuery Autocomplete学习

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

Autocomplete | jQuery UIjQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.https://jqueryui.com/autocomplete/有关 Autocomplete 的细节，可见API 文档 自动完成部件（Autocomplete Widget）。

---

任何可以接收输入的字段都可以转换为 Autocomplete，即，<input> 元素，<textarea> 元素及带有 contenteditable 属性的元素。

主题化

自动完成部件（Autocomplete Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用自动完成部件指定的样式，则可以使用下面的 CSS class 名称：

• ui-autocomplete：用于显示匹配用户的 菜单（menu）
• ui-autocomplete-input：自动完成部件（Autocomplete Widget）实例化的 input 元素。

---

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

$(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>

$('.ui-autocomplete-input[data-search-api-autocomplete-search').on( "autocompletechange", function( event, ui ) {
     // 当输入框输入内容时
    } );
    $('.ui-autocomplete-input[data-search-api-autocomplete-search').autocomplete({
    select: function(event, ui){
      // 当下拉框元素被选中时

      alert(ui.item.value); // 选中元素的内容
    }});