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

【问题标题】：Auto select first option in datalist while typing键入时自动选择数据列表中的第一个选项
【发布时间】：2022-06-10 16:57:39
【问题描述】：

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

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

【问题讨论】：

@Esko 阅读了我的问题。您还会注意到我已经包含了该链接。它没有回答我的问题，也没有回答那个用户的问题。
你想要使用 jquery 还是 javascript？

标签： javascript html

【解决方案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>

【讨论】：

它没有为我完成这个词？

【解决方案2】：

$("form").on('keydown', 'input[list]', function(e){
    if(e.keyCode == 9 || e.keyCode == 13){
      const oInput = this;
      const aOptions = $('#' +$(oInput).attr('list')+ ' option').map(function() {return this.text}).toArray();
      var aRelOptions = aOptions.filter(function(sOption){
        return new RegExp(oInput.value.replace(/\s+/, ".+"), "gi").test(sOption);
      }); 
      if(aRelOptions.length > 0){
        this.value = aRelOptions.shift(); 
      }
      if(e.keyCode == 13) return false;
    }
  }).on("change", 'input[list]', function() {
    $(this).attr("placeholder", this.value);
    this.blur();
  }).on('focus', 'input[list]', function() {
    $(this).attr("placeholder", this.value);
    this.value = "";
  }).on('blur', 'input[list]', function() {
    this.value = $(this).attr("placeholder");
  });

【讨论】：