向表格过滤添加无结果消息

Question

我有以下代码，它确实过滤了一个表，但是当没有结果时它是空白的。

有人可以帮我在找不到任何结果时添加“未找到结果”消息吗？

$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    
    $("#filter tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

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

Answer 1

首先请注意，您对filter() 的使用并不完全正确。它旨在用于根据返回布尔值的函数参数中提供的谓词条件来减少一组元素。相反，您当前的逻辑是将其用作基本的循环机制。

关于该问题，您可以使用filter()通过文本查找匹配的行，然后根据过滤的行数，隐藏或显示“无匹配”消息。像这样的：

jQuery($ => {
  let $rows = $('#filter tr');
  let $tfoot = $('tfoot');

  $("#table_search").on("input", function() {
    var value = this.value.toLowerCase();    
    if (!value) {
      $rows.show();
      $tfoot.hide()
      return;
    }
    
    let $filteredRows = $rows.filter((i, el) => el.innerText.toLowerCase().indexOf(value) != -1);    
    if ($filteredRows.length) {
      $tfoot.hide();
      $rows.hide();
      $filteredRows.show()
    } else {
      $rows.hide();
      $tfoot.show();
    }
  });
});

tfoot { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="table_search" />
<table>
  <tbody id="filter">
    <tr><td>Lorem</td></tr>
    <tr><td>Ipsum</td></tr>
    <tr><td>Dolor</td></tr>
    <tr><td>Sit</td></tr>
    <tr><td>Amet</td></tr>
    <tr><td>Consectetur</td></tr>
    <tr><td>Adipiscing</td></tr>
    <tr><td>Elit</td></tr>
  </tbody>
  <tfoot>
    <tr><td>No matches</td></tr>   
  </tfoot>
</table>

最后，请注意使用input 而不是keyup。后者在这种情况下效果更好，因为它也适用于将文本复制/粘贴到搜索框中的用户。