jQuery搜索JSON文件无结果展示，如何修改实现显示科目全部信息

代码修复点 #

你不需要更换搜索实现方式，仅需要在现有代码基础上调整3处问题即可正常运行：

• JSON结构匹配：你返回的data外层包含Subjects字段，遍历搜索时需要取data.Subjects而非直接遍历data
• DOM选择器匹配：HTML中的搜索结果区域仅设置了class="searchdisplay"，JS中使用的ID选择器#searchdisplay找不到对应元素，需要给展示区域增加id属性
• 结果输出逻辑完善：原有逻辑仅输出科目名称，需要补充其他字段的拼接逻辑

修改后的完整代码 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <input  type="search"
    class="form-control"
    name="searchInput2"
    id="searchInput2"
    placeholder="输入科目名称搜索"
  />
</div>
<!-- 补充id属性匹配JS选择器 -->
<div class="searchdisplay" id="searchdisplay"></div>

JS代码

$(document).ready(function() {
  $.getJSON('subjects.json', function(data) {
    $("#searchInput2").keyup(function () {
      var searchField = $(this).val().trim();
      if (searchField === "") {
        $("#searchdisplay").html("");
        return;
      }
      var regex = new RegExp(searchField, "i");
      var output = '<div class="row">';
      // 修改遍历对象为科目数组data.Subjects
      $.each(data.Subjects, function (key, val) {
        if (val.name.search(regex) != -1) {
          // 修复原有标签语法错误，补充所有字段输出逻辑
          output += '<div class="col-12 mb-3 border p-3">';
          output += `<h5>${val.name}</h5>`;
          output += `<p>科目代码：${val.Code}</p>`;
          output += `<p>学期：${val.Semester}</p>`;
          output += `<p>课程类型：${val.Type.join('、')}</p>`;
          output += `<p>授课教授：${val.Professor}</p>`;
          output += `<p>学分：${val.Credits}</p>`;
          output += `<p>成绩：${val.Grade}</p>`;
          output += `<p>关键词：${val.Keywords.join('、')}</p>`;
          output += `<p>授课形式：${val.Lecture.join('、')}</p>`;
          output += `</div>`;
        }
      });
      output += "</div>";
      $("#searchdisplay").html(output);
    });
  });
});

注意：如果是本地直接打开HTML文件运行，需要通过本地服务（比如VSCode的Live Server插件、本地nginx）访问，否则$.getJSON会因为浏览器跨域限制无法读取本地JSON文件。

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