JavaScript:需要输入元素来根据输入的数据更改选项

Question

我有一个页面，我需要在其中使用纯 javascript 过滤各种数据(用作 JSON 变量)。一切都很好，直到我尝试实现一个数据列表，其中该列表的内容根据用户输入实时更新。

var data = [{name:"Paul"},{name:"Alex"},{name:"Laura"}]  // This is just example object

function updateSearch() {
  let search = document.getElementById('search').value;
  let options = document.getElementById('searchList');
  options.innerHTML = "";
  if (search.length >= 2) {
    search = search.toLowerCase();
    for (let d of data) {
      if (d.name.toLowerCase().search(search) === 0) {
        options.innerHTML += `
                        <option>${d.name}</option>
                    `;
      }
    }
  }
}

<datalist id='searchList'></datalist>
<input type="search" id="search" list='searchList' onchange="updateSearch()">

目标是在输入至少 2 个字符之前不显示完整的姓名列表，但它不会更新，直到用户点击焦点返回搜索输入。

Answer 1

实现您的要求的一种解决方案是将 updateSearch() 绑定(bind)到的事件类型从 onchange 替换为 onkeyup:

const data = [
{ name : "Foo" },
{ name : "Bar" },
{ name : "Bing" },
{ name : "Bong" },
{ name : "Boo!" }];

function updateSearch() {
  let search = document.getElementById('search').value;
  let options = document.getElementById('searchList');

  options.innerHTML = "";
  if (search.length >= 2) {
    search = search.toLowerCase();
    for (let d of data) {
      if (d.name.toLowerCase().search(search) === 0) {
        options.innerHTML += `
                        <option>${d.name}</option>
                    `;
      }
    }
  }
}

<datalist id='searchList'></datalist>
<!-- Update to onkeyup -->
<input type="search" id="search" list='searchList' onkeyup="updateSearch()">

这样做会导致 datalist 在用户键入时交互更新。希望对您有所帮助!