JavaScript多Div过滤异常：匹配结果与无结果提示同时显示

这种同时出现匹配结果和无结果提示的情况，大概率是你没正确统计匹配到的书籍数量，或是无结果提示的显示/隐藏逻辑顺序搞反了。

常见的错误场景有两种：

• 每次输入关键词时先把无结果提示显示出来，之后找到匹配项却忘了把它重新隐藏；
• 判断无结果的条件写错了，比如只检查第一个书籍是否匹配，而非确认所有书籍里有没有至少一个匹配项。

假设你的完整代码是类似下面的常见写法：

const searchBar = document.forms['search-books'].querySelector('input');
const bookItems = document.querySelectorAll('.book-item');
const noResultMsg = document.getElementById('no-result');

searchBar.addEventListener('keyup', function(e) {
  const term = e.target.value.toLowerCase();
  
  // 错误：先默认显示无结果提示
  noResultMsg.style.display = 'block';
  
  bookItems.forEach(book => {
    const title = book.textContent.toLowerCase();
    if (title.includes(term)) {
      book.style.display = 'block';
    } else {
      book.style.display = 'none';
    }
  });
  
  // 这里没检查是否有匹配项，导致提示一直显示
});

核心错误点 #

1. 一开始就显示无结果提示，后续即使找到匹配项也未隐藏；
2. 没有统计匹配书籍的数量，无法准确判断是否真的无结果。

const searchBar = document.forms['search-books'].querySelector('input');
const bookItems = document.querySelectorAll('.book-item');
const noResultMsg = document.getElementById('no-result');

searchBar.addEventListener('keyup', function(e) {
  const term = e.target.value.toLowerCase();
  let matchCount = 0; // 新增：统计匹配到的书籍数量
  
  bookItems.forEach(book => {
    const title = book.textContent.toLowerCase();
    if (title.includes(term)) {
      book.style.display = 'block';
      matchCount++; // 匹配到就计数+1
    } else {
      book.style.display = 'none';
    }
  });
  
  // 关键：根据匹配数量决定是否显示无结果提示
  noResultMsg.style.display = matchCount === 0 ? 'block' : 'none';
});

关键修正说明 #

• 新增matchCount变量，遍历书籍时实时统计匹配项数量；
• 最后根据matchCount是否为0来控制提示的显示/隐藏，确保只有完全无匹配时才展示提示；
• 关键词为空时会自动显示所有书籍并隐藏提示，无需额外处理。

可以给书籍项加个过渡动画，让显示/隐藏更流畅：

.book-item {
  transition: all 0.3s ease;
}

内容的提问来源于stack exchange，提问作者Ashonko