向表筛选添加无结果消息

Question

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

有人能帮我在这里添加一个“找不到结果”的消息显示什么都没有找到吗？

null

$(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>

null

Answer 1

首先，注意filter()的使用不太正确。它用于根据函数参数中提供的谓词条件减少一组元素，函数参数返回一个布尔值。相反，您当前的逻辑正在使用它作为一种基本的循环机制。

对于此问题，可以使用filter()通过文本查找匹配行，然后根据筛选的行数隐藏或显示“不匹配”消息。像这样的东西:

null

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>