如何使用纯 Javascript 从输入数据列表中获取建议值？

Question

我使用纯文本输入和数据列表在用户与输入交互时建议值。我想知道是否有办法显示建议的项目。

例如

    document.getElementById('myBrowser').addEventListener('input', function() {
      console.log(this.list.suggested); // logs out the suggested values 
    });

    <label for="myBrowser">Choose a browser from this list:</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>

因此，如果我输入“Fire”，建议值应该是 ['Firefox']

Answer 1

你可以这样做：

// Obtain the available browsers
let options = Array.from(document.querySelectorAll('#browsers option')).map((option) => option.value);

document.getElementById('myBrowser').addEventListener('input', function () {
  const hint = this.value.toLowerCase();
  // Obtain options matching input
  const suggestions = options.filter((option) => option.toLowerCase().includes(hint));

  console.log(suggestions);
});

<label for="myBrowser">Choose a browser from this list:</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>

这将获得与 Chrome 上完全相同的列表，但在其他浏览器上可能并非如此。

至于从浏览器直接访问建议的列表，我不能确定这是否可行。