jQuery搜索不显示结果

Question

我正在尝试使用 JQuery 代码搜索 JSON 文件，但未显示结果。

这是我的代码：

    $(document).ready(function() {
        $.getJSON('subjects.json', function(data) {
        $("#searchInput2").keyup(function () {
          var searchField = $(this).val();
          if (searchField === "") {
            $("#searchdisplay").html("");
            return;
          }

          var regex = new RegExp(searchField, "i");
          var output = '<div class="row">';

          $.each(data, function (key, val) {
            if (val.name.search(regex) != -1) {
              output += '<div">';
              output +=
                '<div class="form-group"><a class="dropdown-item">' +
                val.name +
                "</a></div>";
            }
          });
          output += "</div>";
          $("#searchdisplay").html(output);
        });


        });
    });

<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"
        />
      </div>
      
      
       <div class="searchdisplay"> 

这是我的 JSON 文件：

    {
   "Subjects": [
       {
          "name": "Programim 1",
          "Code": "01",
          "Semester": "1",
          "Type": ["Mandatory","Elective"],
          "Professor": "Profesor 1",
          "Credits": "7",
          "Grade": "9",
          "Keywords": ["css","js","jquery","php"],
          "Lecture": ["lecture","practical"]
       },

       {
         "name": "Java programim",
         "Code": "02",
          "Semester": "2",
          "Type": ["Mandatory","Elective"],
          "Professor": "Profesor2",
          "Credits": "6",
          "Grade": "9",
          "Keywords": ["css","js","jquery","php"],
          "Lecture": ["lecture","practical"]
       },

       {
         "name": "Programim 3 ",
        "Code": "03",
         "Semester": "7",
         "Type": ["Mandatory","Elective"],
         "Professor": "Profesor 3",
         "Credits": "6",
         "Grade": "7",
         "Keywords": ["css","js","jquery","php"],
         "Lecture": ["lecture","practical"]
      },

      {
         "name": "Computer architecture",
        "Code": "04",
         "Semester": "2",
         "Type": ["Mandatory","Elective"],
         "Professor": "Profesor 4",
         "Credits": "4",
         "Grade": "6",
         "Keywords": ["css","js","jquery","php"],
         "Lecture": ["lecture","practical"]
      },


      {
         "name": "Web Design",
        "Code": "05",
         "Semester": "4",
         "Type": ["Mandatory","Elective"],
         "Professor": "Profesor 5",
         "Credits": "4",
         "Grade": "7",
         "Keywords": ["css","js","jquery","php"],
         "Lecture": ["lecture","practical"]
      }


   ]
         

   

}

我想在搜索主题名称时显示主题的所有信息，因此我需要对代码进行哪些更改才能使其正常工作。我是否需要以不同的方式处理搜索方法，或者我可以使用现有代码进行一些更改。

Answer 1

当您的代码遍历 JSON 文件提供的数据时，您可以使用 JQuery $.each 方法遍历 JSON 文件中的所有值。但是，您的 JSON 文件不是一个数组，而是一个对象。要遍历 JSON 文件中的所有 Subjects，请遍历 data.Subjects 而不是遍历 data。

$.each(data.Subjects, function(key, val) {
  if (val.name.search(regex) != -1) {
    output += '<div">';
    output +=
      '<div class="form-group"><a class="dropdown-item">' +
      val.name + JSON.stringify(val) +
      "</a></div>";
  }
});

然后，使用val，您可以随意显示您的数据。在这种情况下，我使用 JSON.stringify 来显示 subjects.json 文件中的所有数据，但我相信您可以为您的应用程序实现一些更漂亮的东西。例如，您可以使用val.Professor 访问某个学科的教授，并使用您的output 变量显示它。