僅在匹配搜索時顯示資料

我有一個帶有過濾器的搜索，可以按預期縮小資料的范圍。我想實作默認隱藏所有資料的功能，并且只在匹配搜索時顯示結果。目前，如果沒有輸入任何內容，則顯示所有內容。添加所有資料后，串列將很長，因此請求。非常感謝。

$(document).ready(function(){
    $("#search-box").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      var filter = $('#search-filter').val().toLowerCase();
      if(filter == "listitem") {
        $(".listitem").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      } else {
        $(".td-" filter).filter(function() {
          $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      }
    });
    $('#search-filter').on("change",function(){
      var value = $("#search-box").val().toLowerCase();
      var filter = $(this).val().toLowerCase();
      if(filter == "listitem") {
        $(".listitem").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      } else {
        $(".td-" filter).filter(function() {
          $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      }
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="input-group">
    <div class="input-group-append">
      <select id="search-filter" name="search-filter">
        <!--<option value="listitem">All</option>-->
        <option value="" disabled selected>Search by</option>
        <option value="name">Name</option>
        <option value="surname">Surname</option>
      </select>
    </div>
    <input id="search-box" type="text" name="search" placeholder="Type here..." required="required"/>
  </div>
  <table>
    <thead> 
      <tr>
        <th>Name</th>
        <th>Surname</th>
      </tr>
    </thead>
    <tbody>
      <tr class="listitem">
        <td class="td-name">Jane</td>
        <td class="td-surname">Doe</td>
      </tr>
      <tr class="listitem">
        <td class="td-name">Dela</td>
        <td class="td-surname">Cruz</td>
      </tr>
    </tbody>
  </table>
</div>

uj5u.com熱心網友回復：

從隱藏所有內容開始。然后使用if陳述句測驗搜索值是否不為空，并顯示匹配的元素。

我還將過濾代碼提取到一個命名函式中，因此我們不必在兩個事件偵聽器中重復它。

.filter()不應用于對每個元素執行操作，而應使用.each(). 但是在這種情況下，您可以使用它來回傳一個新的集合，該集合只是匹配的元素，然后您可以將它們一起顯示。

function filter_items(value, filter) {
  $(".listitem").hide();
  if (value != '') {
    if (filter == "listitem") {
      $(".listitem").filter(function() {
        return $(this).text().toLowerCase().includes(value)
      }).show();
    } else {
      $(".td-"   filter).filter(function() {
        return $(this).text().toLowerCase().includes(value)
      }).closest(".listitem").show();
    }
  }
}

$(document).ready(function() {
  $("#search-box").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    var filter = $('#search-filter').val().toLowerCase();
    filter_items(value, filter);
  });
  $('#search-filter').on("change", function() {
    var value = $("#search-box").val().toLowerCase();
    var filter = $(this).val().toLowerCase();
    filter_items(value, filter);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="input-group">
    <div class="input-group-append">
      <select id="search-filter" name="search-filter">
        <!--<option value="listitem">All</option>-->
        <option value="" disabled selected>Search by</option>
        <option value="name">Name</option>
        <option value="surname">Surname</option>
      </select>
    </div>
    <input id="search-box" type="text" name="search" placeholder="Type here..." required="required" />
  </div>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Surname</th>
      </tr>
    </thead>
    <tbody>
      <tr class="listitem">
        <td class="td-name">Jane</td>
        <td class="td-surname">Doe</td>
      </tr>
      <tr class="listitem">
        <td class="td-name">Dela</td>
        <td class="td-surname">Cruz</td>
      </tr>
    </tbody>
  </table>
</div>

標籤：html 查询

上一篇：如果jQuery是手動添加的，我應該在腳本中使用importjQuery嗎？

下一篇：如何有條件地為jQuery中的復選框值添加時間戳？