如何禁用用户输入以实现自动完成

Question

本质上，我想强制用户只能从给定值中进行选择。

<

代码笔：https://codepen.io/textech/pen/WNvrLMp

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },

    });
  });

Answer 1

将“ minLength：0”传递给初始化后，单击文本字段即会显示选项：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      minLength: 0,

    });
  });

分叉的代码笔：
https://codepen.io/doughballs/pen/XWbXQZY
文档：
https://materializecss.com/autocomplete.html#options
编辑
我已经为自动完成功能添加了一个侦听器（jQuery，但是您可以根据需要进行重做）-它挂接到实例中以检查“计数”，这是当前返回的选项数。如果该值为0（即不匹配），我们清除自动填充。
我将更新代码笔：D
$('#autocomplete-input').on('keyup',function(){
  console.log('keyup')
   if ( instances[0].count === 0 ) {
     console.log('no matches');
     $('#autocomplete-input').val('');
   }
})