如何通过搜索框按名称搜索JSON数据并在HTML中展示？

嗨，作为jQuery新手确实容易踩一些小坑，我来帮你一步步搞定这个搜索功能！首先看你的需求是点击搜索按钮后，从给定的JSON数据里匹配名称并展示结果，但你原来的代码是用keyup即时触发（每输入一个字符就请求一次），还用到了JSON里不存在的location和image字段，这肯定会导致渲染失败哦。

完整的实现步骤和代码 #

第一步：准备HTML结构

先搭好输入框、搜索按钮和结果展示区域：

<div class="search-container">
  <input type="text" id="search" placeholder="输入职位名称搜索...">
  <button id="searchBtn">搜索</button>
</div>
<div id="result" class="search-results"></div>

第二步：编写jQuery代码

我把你的JSON数据直接存到变量里（避免每次点击都请求文件，更高效；如果你的JSON是外部文件，换成$.getJSON即可），然后绑定按钮点击事件处理搜索逻辑：

$(document).ready(function() {
  // 你的JSON数据，直接存入变量
  const jobData = [
    { "name": "Senior Officer Trade Back Office", "url": "https://www.blockworks.com/senior-officer-trade-back-office-1061445-jv/?source=searchResults&searchType=1&placement=1&sortBy=date" },
    { "name": "Junior Officer Trade Back Office", "url": "https://www.blockworks.com/junior-officer-trade-back-office-1061443-jv/?source=searchResults&searchType=1&placement=2&sortBy=date" },
    { "name": "5 Machine Learning", "url": "https://www.blockworks.com/5-machine-learning-1061442-jv/?source=searchResults&searchType=1&placement=3&sortBy=date" },
    { "name": "3 Ruby Developers", "url": "https://www.blockworks.com/3-ruby-developers-1061441-jv/?source=searchResults&searchType=1&placement=4&sortBy=date" },
    { "name": "Sales Staff (Losgistic - Salary Attractive)", "url": "https://www.blockworks.com/sales-staff-losgistic-salary-attractive-1061440-jv/?source=searchResults&searchType=1&placement=5&sortBy=date" },
    { "name": "5 Front-End Developers", "url": "https://www.blockworks.com/5-front-end-developers-2-1061439-jv/?source=searchResults&searchType=1&placement=6&sortBy=date" }
  ];

  // 绑定搜索按钮点击事件
  $('#searchBtn').click(function() {
    const searchField = $('#search').val().trim();
    const $result = $('#result');
    // 清空之前的搜索结果
    $result.html('');

    // 处理空搜索的情况
    if (!searchField) {
      $result.html('<p>请输入搜索关键词</p>');
      return;
    }

    // 创建不区分大小写的正则表达式
    const expression = new RegExp(searchField, "i");

    // 遍历JSON数据，匹配职位名称
    $.each(jobData, function(key, value) {
      if (value.name.match(expression)) {
        // 渲染匹配结果为可点击的链接
        $result.append(`<div class="result-item"><a href="${value.url}" target="_blank">${value.name}</a></div>`);
      }
    });

    // 处理无匹配结果的情况
    if ($result.children().length === 0) {
      $result.html('<p>没有找到匹配的职位</p>');
    }
  });

  // 可选：点击结果项自动填充到搜索框（和你原代码需求一致）
  $('#result').on('click', '.result-item', function() {
    const jobName = $(this).find('a').text();
    $('#search').val(jobName);
  });
});

第三步：给结果加基础样式（可选）

让界面更友好：

.search-container {
  margin: 20px 0;
}
#search {
  padding: 8px;
  width: 300px;
}
#searchBtn {
  padding: 8px 15px;
  cursor: pointer;
}
.search-results {
  margin-top: 10px;
}
.result-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
.result-item a {
  text-decoration: none;
  color: #333;
}
.result-item a:hover {
  color: #007bff;
}

关键知识点解释 #

• 正则i修饰符：让搜索不区分大小写，比如输入“officer”和“Officer”都能匹配结果
• trim()方法：去除搜索框内容前后的空格，避免无效的空字符搜索
• 直接存储JSON变量：如果你的JSON是外部文件，把const jobData = [...]换成$.getJSON('data.json', function(jobData) { ... })即可，记得把按钮点击事件放到getJSON的回调里
• 异常情况处理：覆盖了空搜索、无匹配结果的场景，提升用户体验

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