如何在jQuery中正确显示筛选结果数量？

常见问题点及解决办法 #

1. 计数重复累加 #

这是最常见的原因——每次筛选时没有重置计数逻辑，或者重复统计了历史匹配结果，导致数值越算越大；清空输入框时因为高频触发事件，错误数值会进一步增多。
修复：直接基于当前匹配的元素集合获取长度，不要用累加变量。比如用filter得到匹配元素后，直接取$matched.length作为计数，而非叠加之前的数值。

2. 选择器范围错误 #

如果筛选逻辑是隐藏不匹配元素，却用全局选择器统计所有元素（包括隐藏项），或者误将父元素/无关元素纳入统计，计数必然不准。
修复：确保统计对象是当前匹配的元素集合，示例代码：

const searchVal = $('#search').val().trim();
const $matchedItems = $('.target-item').filter(function() {
  return $(this).text().includes(searchVal);
});
// 直接用集合长度更新计数
$('#result-count').text($matchedItems.length);

3. 清空输入框的逻辑错误 #

清空输入框时，若未重置计数、未恢复所有元素的显示状态，会残留之前的筛选结果，导致计数异常。
修复：在输入框为空时直接重置计数，并恢复所有元素显示：

const searchVal = $('#search').val().trim();
if (searchVal === '') {
  $('.target-item').show();
  $('#result-count').text(0); // 清空时计数清零
  return;
}
// 后续执行筛选逻辑

4. 事件高频重复触发 #

使用keyup这类高频事件时，未做防抖处理会导致每次输入触发多次计数，数值出现异常波动。
修复：添加防抖函数避免频繁触发：

let debounceTimer;
$('#search').on('keyup', function() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    // 这里写筛选和计数逻辑
  }, 250);
});

完整可运行示例 #

<input id="search-input" type="text" placeholder="输入关键词筛选">
<p>匹配结果数：<span id="count">0</span></p>
<div class="item">西瓜</div>
<div class="item">葡萄</div>
<div class="item">草莓</div>
<div class="item">芒果</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
  const $items = $('.item');
  const $count = $('#count');
  const $input = $('#search-input');

  $input.on('keyup', function() {
    clearTimeout(window.debounceTimer);
    window.debounceTimer = setTimeout(() => {
      const keyword = $(this).val().trim().toLowerCase();
      
      if (!keyword) {
        $items.show();
        $count.text(0);
        return;
      }

      const $matched = $items.filter(function() {
        return $(this).text().toLowerCase().includes(keyword);
      });

      $items.not($matched).hide();
      $matched.show();
      $count.text($matched.length);
    }, 250);
  });
});
</script>

这个示例中，每次输入都会通过防抖控制执行频率，清空输入框时计数自动重置为0，计数完全基于当前匹配的元素集合，不会出现累加错误。

内容的提问来源于stack exchange，提问作者Md. Ibrahim