为Bootstrap+jQuery页面搜索过滤器添加无匹配提示功能

你可以通过以下步骤实现需求：

1. 添加提示元素：在搜索输入框下方新增一个默认隐藏的提示标签，利用Bootstrap的d-none类控制显示状态：

<input type="text" id="searchInput" class="form-control mb-3" placeholder="Search...">
<div id="noMatch" class="alert alert-warning d-none">No match found</div>
<div id="research">
  <!-- 你的页面内容（包含h4及其他需要过滤的元素） -->
</div>

2. 修改过滤函数：在原有逻辑基础上，统计匹配成功的元素数量，根据数量切换提示的显示状态：

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    var matchCount = 0;
    
    $("#research > *").each(function() {
      var isMatch = !$(this).is("h4") && $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).toggle(isMatch);
      
      // 统计匹配成功的元素数量
      if (isMatch) {
        matchCount++;
      }
    });
    
    // 仅当无匹配项且搜索框不为空时，显示提示
    $("#noMatch").toggle(matchCount === 0 && value.length > 0);
  });
});

关键改动说明 #

• 新增matchCount变量，遍历元素时统计符合条件的匹配项数量
• 通过判断matchCount === 0 && value.length > 0，避免搜索框为空时错误显示提示
• 利用Bootstrap的d-none类控制提示初始隐藏，通过toggle()方法切换显示状态

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