如何在jQuery搜索过滤器无结果时显示默认提示信息

首先在你的HTML里，在表格#userFind的下方添加一个默认隐藏的提示元素：

<p id="no-result" style="display:none; text-align:center; padding: 1rem 0; color: #666;">未找到匹配结果</p>

然后修改你的jQuery代码，新增匹配计数逻辑，根据计数判断是否显示提示：

$('#search_field').on('keyup', function() {
  var value = $(this).val();
  var patt = new RegExp(value, "i");
  // 单独获取非表头的行，减少重复DOM操作
  var $nonHeaderRows = $('#userFind').find('tr').not('.t_head');
  // 统计匹配到的行数
  var matchedRows = 0;

  $nonHeaderRows.each(function() {
    var $row = $(this);
    var rowText = $row.find('td').text();
    // 一次判断处理显示/隐藏，同时计数
    if (rowText.search(patt) >= 0) {
      $row.show();
      matchedRows++;
    } else {
      $row.hide();
    }
  });

  // 根据匹配数控制提示的显示/隐藏
  $('#no-result').toggle(matchedRows === 0);
});

代码说明： #

• 把非表头的行单独缓存，避免每次循环都重新查找，提升性能
• 用matchedRows统计符合条件的行数，避免重复判断DOM内容
• 使用toggle()方法简化显示/隐藏逻辑：当matchedRows为0时显示提示，否则隐藏
• 当搜索框清空时，正则会匹配所有内容，matchedRows会等于所有非表头行数，提示自动隐藏

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