如何在多个搜索框中搜索

如何解决如何在多个搜索框中搜索

如何同时使用2个或更多搜索框进行搜索？我确实是这样的：

查看：

<th>
  <p>
      Nr account: @Html.TextBox("Account")
      <input type="button" id="search" value="Search" />
  </p>

  <p>
      Nr invoice: @Html.TextBox("Invoice")
      <input type="button" id="search" value="Search" />
  </p>
</th>

jQuery：

$('#search').click(function () {

    var value = $("#Account,#Invoice").val().toLowerCase();

    $("#myTable tr").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    });

通常来说，当我单击“搜索”时，表格将按第一个搜索框-“帐户”的值进行过滤。我希望表格被两个搜索框的值过滤，哪里出了错？

解决方法

您需要使用class而不是id选择器，并且单击按钮时分别获取两个值，并且只需在each循环内比较两个值即可。

演示代码 ：

$('.search').click(function() {
//get both values
  var value = $("#Account").val().toLowerCase();
  var value2 = $("#Invoice").val().toLowerCase();
  $("#myTable tbody tr").filter(function() {
  var texts =$(this).text().toLowerCase()
  //check both condition 
    $(this).toggle(texts.indexOf(value) > -1 && (texts.indexOf(value2) > -1))
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>
        <p>
          Nr account<input type="text" id="Account">
          <input type="button" class="search" value="Search" />
        </p>

        <p>
          Nr invoice:<input type="text" id="Invoice">
          <input type="button" class="search" value="Search" />
        </p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Xavier</td>
      <td>41</td>
    </tr>
    <tr>
      <td>Muska</td>
      <td>38</td>
    </tr>
    <tr>
      <td>Swati</td>
      <td>45</td>
    </tr>

  </tbody>
</table>