javascript - 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 变量显示该教授。