如何在jQuery Filter列表过滤无匹配数据时显示未找到提示

核心思路 #

筛选完成后统计匹配的有效数据行数量，若为0则显示not found提示，否则隐藏提示。

具体修改步骤 #

1. 新增无结果提示HTML结构 #

在原有<tbody id="myTable">的末尾追加提示行，默认隐藏：

<tbody id="myTable">
  <!-- 原有表格行保持不变 -->
  <tr id="noResult" style="display: none;">
    <td colspan="3" align="center">not found</td>
  </tr>
</tbody>

注：colspan属性值需要和你的表格列数保持一致，当前场景为3列，因此填3。

2. 修改JS筛选逻辑 #

调整原有keyup事件的代码，增加匹配结果判断逻辑：

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // 筛选所有匹配的有效数据行（排除无结果提示行）
    var matchedRows = $("#myTable tr:not(#noResult)").filter(function() {
      return $(this).text().toLowerCase().indexOf(value) > -1;
    });
    // 先隐藏所有有效数据行，再显示匹配的行
    $("#myTable tr:not(#noResult)").hide();
    matchedRows.show();
    // 控制无结果提示显隐
    $("#noResult").toggle(matchedRows.length === 0);
  });
});

3. 可选：优化提示样式 #

可在CSS中追加样式，让无结果提示更美观：

#noResult td {
  color: #888;
  padding: 24px 0;
}

内容的提问来源于stack exchange，提问作者duatree