键入时自动选择数据列表中的第一个选项

Question

我有一个连接到输入的数据列表

<input list='typesOfFruit' placeholder="Enter a fruit...">

<datalist id='typesOfFruit'>
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
</datalist>

当用户输入Ap...“How can I make it”时，它已经选择了最上面的建议“Apple”，因此如果正确，他们只需按 Enter 键即可，而不必按向下箭头然后 Enter。

编辑：类似的问题，但没有人正确回答：如何自动选择数据列表中的第一项（html 5）？

我需要在输入时自动选择最上面的建议，而不是静态选择列表中的第一项。因此，如果我按 B，香蕉将是最重要的建议，我想知道是否可以让它自动聚焦，以便用户可以按 ENTER 键而不是向下箭头 Enter

Answer 1

您可以通过维护选项的自定义查询过滤器来做到这一点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>