如何获取列表中的多个项目

Question

我有一个搜索功能，如果查询没有返回任何项目，我想不显示no results 。 问题是，我不确定如何获取当前显示的数字或项目。

这是我的功能：

find.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";
    }
  });
});

Answer 1

您可以使用布尔标志：

find.addEventListener("keyup", function() {
  let noResults = true;
  Array.from(animalList.children).forEach(d => {
    if (d.dataset.animalName.toLowerCase().indexOf(this.value.toLowerCase()) != -1) {
      d.style.display = "block";
      noResults = false;
    } else {
      d.style.display = "none";
    }
  });
  if (noResults) {
    // display no results
  }
});

Answer 2

由于您正在使用 javascript 和关键事件，并且您告诉我们您想在某些列表过滤时显示一些消息字符串，因此我的建议是：

在函数启动时显示无结果消息，然后过滤，如果得到结果，则执行相应的功能。

find.addEventListener("keyup", function() {
  // show no result message and then do the other stuff, 
  // this is a UI event handler after all
  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";
    }
  });
});