时间戳

首页 > 解决方案 > 如何禁用用户输入以实现自动完成

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

问题描述

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

例如，当用户在文本框内选择或单击时，它应该显示他/她的一些值（例如 Microsoft 和 google），然后他应该能够选择其中一个或键入 a 然后选择 apple 但在在任何情况下，他都应该能够输入或选择不在数据/值中的任何内容。

代码笔： 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'
      },

    });
  });

标签： javascripthtmlmaterialize

解决方案

将 '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('');
   }
})

推荐阅读