JSON搜索匹配结果在HTML页面仅显示最后一条的修复方法

你遇到的问题核心很明确：每次循环中直接用innerHTML =赋值会覆盖之前的内容，所以哪怕控制台能打印所有匹配结果，页面上最终只会显示最后一条匹配的数据。下面是具体的修复方案和优化建议：

核心问题原因 #

在你的循环里，每次找到匹配项时，都会执行类似document.getElementById("score").innerHTML = "Score: " + data[i].score;的代码——这会把该元素的内容完全替换成当前匹配项的信息，而不是把新结果追加到后面。循环结束后，自然就只剩最后一条匹配的数据了。

修复后的代码示例 #

方案1：使用innerHTML +=追加内容（简单直观） #

先修正你代码里的语法错误（data的定义格式不对），然后调整逻辑：

// 修正后的数据源（示例）
var data = [
  {"score": 3, "type": "Type A", "country": "Norway"},
  {"score": 5, "type": "Type B", "country": "Sweden"},
  {"score": 2, "type": "Type A", "country": "Norway"},
  {"score": 4, "type": "Type C", "country": "Norway"}
];

function myFunction() {
  var searchInput = document.getElementById("mySearch").value.trim();
  var matchCount = 0;
  
  // 每次搜索前清空所有结果容器，避免旧内容残留
  document.getElementById("results").innerHTML = "";
  document.getElementById("score").innerHTML = "";
  document.getElementById("type").innerHTML = "";
  document.getElementById("country").innerHTML = "";

  // 处理空输入的情况
  if (!searchInput) {
    document.getElementById("results").innerHTML = "Please enter a country name";
    return;
  }

  // 遍历数组（推荐用普通for循环或for...of，而非for...in）
  for (var i = 0; i < data.length; i++) {
    // 不区分大小写匹配，提升用户体验
    if (data[i].country.toLowerCase() === searchInput.toLowerCase()) {
      matchCount++;
      // 用innerHTML += 追加内容，而不是覆盖
      document.getElementById("score").innerHTML += `Score: ${data[i].score}<br>`;
      document.getElementById("type").innerHTML += `Type: ${data[i].type}<br>`;
      document.getElementById("country").innerHTML += `Country: ${data[i].country}<br>`;
    }
  }

  // 循环结束后再设置匹配总数
  document.getElementById("results").innerHTML = `Results: ${matchCount}`;
  
  // 无匹配结果时的友好提示
  if (matchCount === 0) {
    document.getElementById("score").innerHTML = "No matching countries found";
  }
}

方案2：创建DOM元素添加（更安全，推荐） #

如果你的数据可能包含特殊字符，或者想遵循更规范的DOM操作方式，推荐用创建元素的方法（避免innerHTML潜在的XSS风险）：

var data = [
  {"score": 3, "type": "Type A", "country": "Norway"},
  {"score": 5, "type": "Type B", "country": "Sweden"},
  {"score": 2, "type": "Type A", "country": "Norway"}
];

function myFunction() {
  const searchInput = document.getElementById("mySearch").value.trim();
  let matchCount = 0;
  
  // 获取容器元素
  const resultsEl = document.getElementById("results");
  const scoreEl = document.getElementById("score");
  const typeEl = document.getElementById("type");
  const countryEl = document.getElementById("country");

  // 清空容器
  resultsEl.textContent = "";
  scoreEl.innerHTML = "";
  typeEl.innerHTML = "";
  countryEl.innerHTML = "";

  if (!searchInput) {
    resultsEl.textContent = "Please enter a country name";
    return;
  }

  // 用for...of遍历数组，语法更简洁
  for (const item of data) {
    if (item.country.toLowerCase() === searchInput.toLowerCase()) {
      matchCount++;
      
      // 创建并添加单个结果元素
      const scoreItem = document.createElement("div");
      scoreItem.textContent = `Score: ${item.score}`;
      scoreEl.appendChild(scoreItem);

      const typeItem = document.createElement("div");
      typeItem.textContent = `Type: ${item.type}`;
      typeEl.appendChild(typeItem);

      const countryItem = document.createElement("div");
      countryItem.textContent = `Country: ${item.country}`;
      countryEl.appendChild(countryItem);
    }
  }

  resultsEl.textContent = `Results: ${matchCount}`;
  if (matchCount === 0) {
    scoreEl.textContent = "No matching countries found";
  }
}

关键优化点 #

1. 清空容器：每次搜索前清空结果区域，避免新旧内容混在一起。
2. 追加而非覆盖：用innerHTML +=或创建DOM元素的方式添加结果，保留所有匹配项。
3. 不区分大小写匹配：提升用户体验，输入norway或NORWAY都能匹配到数据。
4. 空输入与无匹配提示：增强交互友好性，避免用户困惑。
5. 数组遍历方式：推荐用for循环或for...of遍历数组，for...in更适合遍历对象，可能会遍历到数组的非索引属性。

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