如何使用纯JavaScript获取input datalist中的建议值？

原生HTML的<datalist>并没有提供直接获取当前显示建议项的API，你示例代码里的this.list.suggested是不存在的属性，无法直接拿到浏览器自动筛选后的结果。

要实现这个需求，你可以手动模拟浏览器的筛选逻辑，根据输入框的当前值过滤<datalist>中的选项，得到匹配的建议项：

示例代码 #

HTML

<label for="myBrowser">选择浏览器：</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

JavaScript

const input = document.getElementById('myBrowser');
const datalist = input.list;

input.addEventListener('input', function() {
  const inputValue = this.value.toLowerCase();
  // 提取datalist中所有选项的value值
  const allOptions = Array.from(datalist.options).map(opt => opt.value);
  // 模拟浏览器前缀匹配逻辑（可根据需求改为包含匹配）
  const suggested = allOptions.filter(opt => opt.toLowerCase().startsWith(inputValue));
  
  console.log(suggested); // 输入"Fire"时会输出 ["Firefox"]
});

补充说明 #

不同浏览器对<datalist>的筛选规则可能略有差异：部分浏览器采用前缀匹配（仅匹配以输入值开头的选项），部分支持包含匹配（只要选项包含输入值就会显示）。你可以根据需求修改过滤条件，比如将startsWith替换为includes来实现包含匹配。

内容的提问来源于stack exchange，提问作者digitalWestie