如何统计搜索栏匹配的卡片数量并修复indexOf匹配异常问题

问题根因 #

• 原有逻辑将提示文案更新写在了卡片遍历循环内部，每次遍历卡片都会覆盖提示内容：搜索yatch时，只有第4张卡片匹配，最后一张（第5张）卡片不匹配，循环结束时最后执行的是不匹配分支的文案覆盖，所以就算有匹配结果也会显示「无匹配结果」
• 没有单独统计匹配卡片的总数量，原有计数是写死的固定值，无法实现动态计数需求

修复方案 #

调整逻辑：

1. 循环前先初始化匹配数计数器为0
2. 遍历每张卡片时，只处理高亮、显示/隐藏逻辑，匹配成功的话计数器加1
3. 全部卡片遍历完成后，再根据计数器的数值统一更新提示文案

修复后完整代码 #

JS代码 #

document.getElementById("search").addEventListener("input", refree);

function refree() {
  const reader = document.getElementsByClassName("deviceNameCardHead")
  const reed = document.getElementById("search").value;
  const reed1 = reed.toLowerCase();
  // 初始化匹配计数器
  let matchCount = 0;
  for (let i = 0; i < reader.length; i++) {
    const readerText = reader[i].textContent
    if (reed != '') {
      reader[i].innerHTML = readerText.replace(new RegExp(reed, 'gi'), (match) => `<span class="highlight">${match}</span>`);
      if (readerText.toLowerCase().indexOf(reed1) > -1) {
        reader[i].parentElement.style.display = "block";
        // 匹配成功计数器加1
        matchCount++;
      } else {
        reader[i].parentElement.style.display = "none";
      }
    } else {
      reader[i].innerHTML = readerText;
      reader[i].parentElement.style.display = "block";
    }
  }
  // 循环结束统一更新提示文案
  const demoEl = document.getElementById("demo");
  if (reed === '') {
    demoEl.innerHTML = "Showing all 5 results";
  } else {
    if (matchCount > 0) {
      demoEl.innerHTML = `搜索${reed}共找到${matchCount}个匹配卡片`;
    } else {
      demoEl.innerHTML = `No result found for <b>"${reed}"</b>`;
    }
  }
}

CSS代码（无修改） #

.highlight {
  background: yellow;
}

.deviceNameCardFlex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.deviceNameCard {
  display: flex;
  flex-flow: column;
  border: 2px solid red;
  width: 40%;
  height:200px;
  box-shadow:3px 3px 10px;
  border-radius:5px;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

HTML代码（无修改） #

<div id="devicesBtnData">
  <div class="searchDevice">
    <span class="searchDeviceBtn">Search Device</span>
    <input id="search" type="search" placeholder="Try it">
    <span id="demo"></span>
    <span id="demo1"></span>
    <br>
  </div>

  <div class="deviceNameCardFlex">
    <div class="deviceNameCard">
      <h3 class="deviceNameCardHead">Lenova Yoga laptop Pro</h3>
      <div>Card Content</div>
    </div>
    <div class="deviceNameCard">
      <h3 class="deviceNameCardHead">Lenova Yoga laptop Pro</h3>
      <div>Card Content</div>
    </div>
    <div class="deviceNameCard">
      <h3 class="deviceNameCardHead">No use of P in next</h3>
      <div>Card Content</div>
    </div>
    <div class="deviceNameCard">
      <h3 class="deviceNameCardHead">yatch</h3>
      <div>Card Content</div>
    </div>
    <div class="deviceNameCard">
      <h3 class="deviceNameCardHead">Lenova Yoga laptop Pro</h3>
      <div>Card Content</div>
    </div>

  </div>
</div>

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