我有一个连接到输入的datalist
<input list='typesOfFruit' placeholder="Enter a fruit...">
<datalist id='typesOfFruit'>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</datalist>
当用户输入Ap...
时如何让它已经选择了最佳建议“Apple”,所以如果它是正确的,他们只需按Enter键,而不是按向下箭头然后输入。
编辑:类似的问题,但没有人正确回答:How to auto select the first item in datalist (html 5)?
我需要在键入时自动选择顶部建议,而不是静态选择列表中的第一个项目。因此,如果我按B,香蕉将是最重要的建议,我想知道它是否可以让它自动对焦,这样用户可以点击ENTER而不是向下箭头输入
您可以通过维护datalist
选项的自定义查询过滤器来完成此操作。
请尝试以下代码。如果您已经知道options
数据,则可以减少锅炉板。
希望这可以帮助!
var input = document.querySelector("input");
var options = Array.from(document.querySelector("datalist").options).map(function(el){
return el.innerHTML;
}); //Optional if you have data
input.addEventListener('keypress', function(e){
if(e.keyCode == 13){
var relevantOptions = options.filter(function(option){
return option.toLowerCase().includes(input.value.toLowerCase());
}); // filtering the data list based on input query
if(relevantOptions.length > 0){
input.value = relevantOptions.shift(); //Taking the first
}
}
});
<input list='typesOfFruit' placeholder="Enter a fruit...">
<datalist id='typesOfFruit'>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</datalist>