在输入框下方添加一个自动完成下拉菜单，以在表单中建议可能的值。您还可以动态填充自动完成选项列表。

  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
        

初始化

数据是一个 json 对象，其中键是匹配字符串，值是可选的图像 url。

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });


  // Or with jQuery

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });
        

选项

名称	类型	默认值	说明
data	对象	{}	定义带有可选图标字符串的自动完成选项的数据对象。
limit	数字	无穷大	自动完成显示的结果限制。
onAutocomplete	函数	null	自动完成时的回调。
minLength	数字	1	自动完成开始前的最小字符数。
sortFunction	函数		定义自动完成选项列表顺序的排序函数。

sortFunction

这是默认的比较函数。您可以通过传递具有这 3 个相同参数的函数来编写自己的比较函数。您可以在 此处 了解更多有关比较函数的工作原理。

  // Sort function for sorting autocomplete results
  function (a, b, inputString) {
    return a.indexOf(inputString) - b.indexOf(inputString);
  }
        

要禁用排序并按数据对象中显示的值使用值，请使用错误值。

方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以像这样获取插件实例

  var instance = M.Autocomplete.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.autocomplete').autocomplete('methodName');
    $('.autocomplete').autocomplete('methodName', paramName);
  */
        

.open();

打开自动完成下拉菜单。

instance.open();
      

.close();

关闭自动完成下拉菜单。

instance.close();
      

.selectOption();

选择特定的自动完成选项。

参数

元素：自动完成选项的元素。

instance.selectOption(el);
      

.updateData();

更新自动完成选项数据。

参数

对象：自动完成选项数据对象。

instance.updateData({
  "Apple": null,
  "Microsoft": null,
  "Google": 'https://placehold.it/250x250'
});
      

.destroy();

销毁插件实例并拆除

instance.destroy();
      

属性

名称	类型	说明
el	元素	用于初始化插件的 DOM 元素。
options	对象	实例初始化时使用的选项。
isOpen	布尔值	如果自动完成已打开。
count	数字	匹配的自动完成选项数。
activeIndex	整数	当前选定选项的索引。
dropdown	下拉菜单	此自动完成的下拉插件实例。