javascript - 尝试过滤数组但未获得所需的输出

Question

我有一个 filtertask 输入，所以每当用户输入内容时，它应该只显示与输入的任务匹配的任务

过滤工作正常，但在我删除输入的文本后，任务列表不再出现

这里 list-item 是 li 元素的类

如果任务列表中有“singh”和“sharma”，我输入“m”进行过滤，它会显示“sharma”。但是当我清除 filtertask 输入时，只显示 'sharma' 而不是 'singh' 和 'sharma'

filter.addEventListener('keyup', filTask);

function filTask(e) {

  const text = e.target.value.toLowerCase();
  if (text !== '') {
    document.querySelectorAll('.list-item').forEach(function(task) {
      const item = task.firstChild.textContent;
      if (item.toLowerCase().indexOf(text) != -1) {
        task.style.display = 'block';
      } else {
        task.style.display = 'none';
      }
    });
  }
}

标签： javascripthtmlcss

Answer 1

你只需要else这里的一部分，

if (text !== '') {
    document.querySelectorAll('.list-item').forEach(function(task) {
        const item = task.firstChild.textContent;
        if (item.toLowerCase().indexOf(text) != -1) {
            task.style.display = 'block';
        } else {
            task.style.display = 'none';
        }
    });
} else {
    document.querySelectorAll('.list-item').forEach(function(task) {
        task.style.display = 'block';
    });
}