本质上，我想强制用户只能从给定值中进行选择。
例如，当用户在文本框中选择或单击时，它应该向他/她显示一些值（例如Microsoft和google），然后他应该能够选择其中一个值或键入a，然后选择apple，但在在任何情况下，他都应该能够输入或选择不在数据/值中的任何内容。
CodePen：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'
},
});
});
当您单击文本字段时，将“ 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（即不匹配），我们将清除自动完成功能。
我将更新codepen：D
$('#autocomplete-input').on('keyup',function(){
console.log('keyup')
if ( instances[0].count === 0 ) {
console.log('no matches');
$('#autocomplete-input').val('');
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句