求助：基于表单输入实现JSON数据匹配搜索的前端代码完善

看起来你已经搭好了基础的搜索表单框架，我来帮你补全剩余部分，实现输入关键词后搜索JSON数据并展示匹配结果的完整功能。

第一步：修正并完善HTML结构 #

首先你的原HTML有个小语法错误（class="form-control"的引号没闭合），我还添加了搜索按钮和用于展示结果的区域，让交互更完整：

<div class="container">
  <form id="searchForm" class="form-group">
    <input type="text" id="searchText" class="form-control" placeholder="输入关键词搜索..." />
    <button type="submit" class="btn btn-primary mt-2">搜索</button>
  </form>
  <!-- 用于展示搜索结果的区域 -->
  <div id="results" class="mt-3"></div>
</div>

第二步：准备示例JSON数据 #

这里我用一个模拟的人物信息数据集作为示例，你可以直接替换成自己的实际JSON数据源：

// 示例JSON数据（可替换为你的目标数据）
const targetData = [
  { id: 1, name: "Alice", role: "Frontend Engineer", location: "Toronto" },
  { id: 2, name: "Bob", role: "Backend Developer", location: "Berlin" },
  { id: 3, name: "Charlie", role: "UX Designer", location: "Tokyo" },
  { id: 4, name: "Diana", role: "Frontend Engineer", location: "Toronto" }
];

第三步：完善JavaScript搜索逻辑 #

接下来补全你的JavaScript代码，实现表单提交时的搜索过滤、结果渲染逻辑：

const searchForm = document.getElementById('searchForm');
const resultsContainer = document.getElementById('results');

searchForm.addEventListener('submit', function(e){
  e.preventDefault();
  const searchText = document.getElementById('searchText').value.trim().toLowerCase();
  
  // 触发搜索逻辑
  searchData(searchText);
});

function searchData(keyword) {
  // 处理空输入的情况
  if (!keyword) {
    resultsContainer.innerHTML = '<p>请输入搜索关键词</p>';
    return;
  }

  // 过滤JSON数据：匹配任意属性包含关键词的项（不区分大小写）
  const matchedItems = targetData.filter(item => {
    return Object.values(item).some(value => 
      value.toString().toLowerCase().includes(keyword)
    );
  });

  // 把结果渲染到页面
  renderSearchResults(matchedItems);
}

// 渲染搜索结果的辅助函数
function renderSearchResults(items) {
  if (items.length === 0) {
    resultsContainer.innerHTML = '<p>未找到匹配的结果</p>';
    return;
  }

  // 用卡片样式生成结果列表
  const resultHtml = items.map(item => `
    <div class="card mb-2">
      <div class="card-body">
        <h5 class="card-title">${item.name}</h5>
        <p class="card-text">角色：${item.role}</p>
        <p class="card-text">地点：${item.location}</p>
      </div>
    </div>
  `).join('');

  resultsContainer.innerHTML = resultHtml;
}

功能细节说明 #

• 表单提交时会阻止默认跳转，避免页面刷新
• 搜索逻辑支持不区分大小写的模糊匹配
• 可匹配数据对象的任意属性值（如果需要只匹配特定字段，比如只搜name，可以修改filter里的判断逻辑）
• 处理了空输入、无匹配结果的边界情况，给出友好提示
• 结果用卡片样式展示，提升可读性和视觉体验

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