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

  <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">自动完成</label>
        </div>
      </div>
    </div>
  </div>
        

初始化

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

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


  // 或用JQuery

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

选项

名称	类型	默认	描述
data	Object	{}	定义具有可选图标字符串的自动完成选项的数据对象。
limit	Number	Infinity	自动完成显示的结果限制数量。
onAutocomplete	Function	null	自动完成时的回调。
minLength	Number	1	自动完成开始前的最小字符数。
sortFunction	Function		排序函数，用于定义自动完成选项列表的顺序。

sortFunction

这是默认的compareFunction。您可以通过传递具有这3个参数的函数来编写自己的compareFunction。您可以在 这里阅读更多关于compareFunction如何工作的信息。

  // 用于对自动完成结果进行排序的排序功能
  function (a, b, inputString) {
    return a.indexOf(inputString) - b.indexOf(inputString);
  }
        

要禁用排序并使用数据对象中显示的值，请使用一个虚假的值。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：

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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

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

.open();

打开自动完成下拉选项

instance.open();
      

.close();

关闭自动完成下拉列表

instance.close();
      

.selectOption();

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

参数

Element: 自动完成选项的元素。

instance.selectOption(el);
      

.updateData();

更新自动完成选项数据。

参数

Object: 自动完成选项数据对象。

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

.destroy();

销毁插件实例并回收

instance.destroy();
      

属性

名称	类型	描述
el	Element	插件初始化时使用的DOM元素。
options	Object	初始化实例时使用的选项。
isOpen	Boolean	自动完成是否打开
count	Number	匹配到的自动完成项数量
activeIndex	Integer	当前选择项的索引
dropdown	Dropdown	此自动完成的下拉列表插件的实例。