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

时间:2019-02-26 06:45:57

标签: javascript html

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

<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键而不是向下箭头输入

1 个答案:

答案 0 :(得分:2)

您可以通过为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>