javascript - 根据输入值/ javascript过滤数组对象

Question

我正在尝试根据用户输入从数组列表中过滤我的对象，但我不确定如何实现这一点。

那是我的html：

  <input id="search" type="text" placeholder="Search..">
    <div id="animallist"></div>

javascript:

const animals = [{
    name: "Cat",
    useful: "no"
  },
  {
    name: "Dog",
    useful: "yes"
  },
  {
    name: "Fish",
    useful: "no"
  }
  ]

animals.forEach(addLink);

function addLink(animal, i) {
  const div = document.createElement('div');
  const animalList = document.createElement('h2');
  animalList.innerHTML =  animal.name + " " +"-"+"useful?" + " "+ animal.useful;
  animalList.style.cssText = "text-align:center;"
  div.appendChild(animalList);
  animallist.appendChild(div);

}

我不知道这是否可能，但我想这样做，所以它会实时过滤项目，所以如果我C在搜索框中输入字母，那么它将消除数组列表中的其他 2 个项目并显示只有Cat.

jsfiddle

标签： javascript

Answer 1

您可以编辑您的addLinkto have div.dataset.animalName = animal.name;，并添加以下代码：

search.addEventListener("keyup", function() {
    Array.from(animallist.children).forEach(d => {
    if (d.dataset.animalName.toLowerCase().indexOf(this.value.toLowerCase()) != -1) {
        d.style.display = "block";
    } else {
        d.style.display = "none";
    }
  });
});

参考this fiddle。