JavaScript：已过滤变量的匹配项计数问题

看来你在统计筛选结果数量的时候踩了个小坑，我来帮你理清楚问题所在，再给你可行的解决方案～

问题根源 #

你原代码里的results = a.innerHTML.toUpperCase().indexOf(filter) > -1;生成的是一个布尔值（true或false，表示单个元素是否匹配筛选条件），而不是包含所有匹配项的数组/集合。布尔值并没有filter方法，这就是你没法继续过滤统计的原因。

解决方案 #

根据你的场景，这里有两种常用的实现方式：

1. 先收集候选元素，筛选后直接取数组长度 #

这种方式更适合在筛选逻辑初期就统一处理，既可以拿到匹配的元素集合，又能直接统计数量：

// 1. 获取所有需要筛选的商业伙伴元素，转成数组（假设元素类名为partner）
const allPartners = Array.from(document.querySelectorAll('.partner'));

// 2. 获取用户输入的筛选关键词，统一转大写（和你的原逻辑保持一致）
const filterKeyword = document.getElementById('filter-input').value.toUpperCase();

// 3. 筛选出符合条件的元素
const matchedPartners = allPartners.filter(partner => {
  return partner.innerHTML.toUpperCase().indexOf(filterKeyword) > -1;
});

// 4. 统计数量并展示
const resultElement = document.getElementById("result");
resultElement.textContent = `找到 ${matchedPartners.length} 个匹配的商业伙伴`;

// 你还可以用matchedPartners数组来渲染筛选后的结果列表

2. 针对已完成DOM筛选的场景，直接统计可见元素 #

如果你已经通过修改DOM（比如给不匹配元素加隐藏类、设置display:none）完成了筛选展示，那可以直接统计页面上的可见匹配项：

// 统计所有未被隐藏的partner元素（假设用.hidden类控制隐藏）
const matchCount = document.querySelectorAll('.partner:not(.hidden)').length;

// 或者如果是直接修改style的display属性
const matchCount = document.querySelectorAll('.partner:not([style*="display: none"])').length;

// 展示数量
document.getElementById("result").textContent = `找到 ${matchCount} 个匹配的商业伙伴`;

额外提示 #

如果你的筛选逻辑是循环每个元素判断是否匹配，那可以在循环过程中直接计数，比如：

let matchCount = 0;
const allPartners = document.querySelectorAll('.partner');
const filterKeyword = document.getElementById('filter-input').value.toUpperCase();

allPartners.forEach(partner => {
  const isMatch = partner.innerHTML.toUpperCase().indexOf(filterKeyword) > -1;
  if (isMatch) {
    matchCount++;
    // 这里可以做显示元素的操作
  } else {
    // 这里可以做隐藏元素的操作
  }
});

// 最后展示数量
document.getElementById("result").textContent = `找到 ${matchCount} 个匹配的商业伙伴`;

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