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

Menor 发表于 Dev

减

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

那是我的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

Aplet123

您可以将其编辑addLink为具有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";
    }
  });
});

参考这个小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。