javascript - 根据选定的搜索条件和搜索关键字显示结果表

Question

假设我有一个由学生列表组成的表。要搜索学生，我有一个下拉列表，其中包含我可以选择的搜索条件，例如按 ID 搜索、按家乡搜索、按性别搜索、按最高 GPA 搜索等。选择条件后，我想要搜索的话，我继续输入关键词。

目前，我有 2 个变量，category 是用于存储我选择搜索的选项/条件的变量，keyword 是我输入的单词输入框。

如果我想将我输入的关键字与我选择的条件列中的所有对象进行比较，该怎么办？假设我选择按家乡搜索，当我输入"new"时，结果表将显示家乡包含"new"字样的所有结果。我已经使用了 toUpperCase() 因为我不想使用区分大小写的搜索。

Answer 1

请找到下面工作过滤器功能的代码片段，这里我使用搜索字段和下拉列表来选择类别，我想这会很有帮助:

$(document).ready(function() {
  this.json = {
    "Students": [{
        "id": "1",
        "hometown": "London",
        "gender": "Male",
        "GPA": "8",
        "name": "Lee",
      },
      {
        "id": "2",
        "hometown": "NY",
        "gender": "Male",
        "GPA": "9",
        "name": "Shaldon",
      }, {
        "id": "3",
        "hometown": "Paris",
        "gender": "Female",
        "GPA": "7",
        "name": "Julie",
      }
    ]
  };
  
  this.renderTable = function(Students) {
    var tbody = document.getElementById('tbody');
    tbody.innerHTML = "";
    for (var i = 0; i < Students.length; i++) {
      var tr = "<tr>";
      tr += "<td>ID</td>" + "<td>" + Students[i].id + "</td></tr>";
      tr += "<td>HomeTown</td>" + "<td>" + Students[i].hometown + "</td></tr>";
      tr += "<td>Gender</td>" + "<td>" + Students[i].gender + "</td></tr>";
      tr += "<td>GPA</td>" + "<td>" + Students[i].GPA + "</td></tr>";
      tr += "<td>NAME</td>" + "<td>" + Students[i].name + "</td></tr>";
      tr += "<hr>";
      tbody.innerHTML += tr;
    }
  }

  this.renderTable(this.json.Students);

  console.log(this.json.Students);
  //code for filtering//
  this.Filter = function() {
    var search = document.getElementById('search');
    var category = document.getElementById('category');
    var filteredObj = this.json.Students;
    filteredObj = $.map(this.json.Students, function(val, key) {
      if (search.value === val[category.value]) return val;
    });
    filteredObj.length>0 ? this.renderTable(filteredObj) : this.renderTable(this.json.Students);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p></p>

<input id="search" type="search">
<select id = "category">
<option value = "select">select</option>
   <option value = "id">ID</option>
   <option value = "hometown">HomeTown</option>
   <option value = "gender">Gender</option>
   <option value = "GPA">GPA</option>
   <option value = "name">NAME</option>
  </select>
<button onclick="Filter()">Filter</button>

<table>
  <tbody id="tbody"></tbody>
</table>