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()绑定的事件类型从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随着用户键入而交互更新。希望有帮助！

Answer 2

HTML拥有自己的tags，因此您不能像在数据列表中那样使用列表中未包含的任何标签。要列出元素，最好使用标签 ol （有序列表）或 ul （无序列表）。
另一方面，如果要在用户键入内容时使用该功能，则需要使用 onkeyup 事件。

onkeyup事件是在用户释放键（在键盘上）时发生的。

html：

<ul id='searchList'>dfdfd</ul>
<input type="search" id="search" list='searchList' onkeyup="updateSearch()">

js：

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 += `
                    <li>${d.name}</li>
                `;
            }
        }
    }
}

JavaScript：需要输入元素以根据输入的数据更改选项

2 个答案: