jQuery页面搜索过滤优化：仅显示匹配H4及内容，无匹配时提示

核心思路 #

1. 搜索时先默认隐藏所有标题（h4）、段落（p）和全局无匹配提示
2. 筛选出内容包含搜索关键词的段落，再找到这些段落对应的父级标题并显示
3. 统计所有可见段落的数量，若为0则显示全局无匹配提示；输入为空时恢复显示所有内容

优化后代码 #

$(document).ready(function () {
    // 提前缓存DOM元素，减少重复查询提升性能
    const $research = $("#research");
    const $h4s = $research.find("h4");
    const $ps = $research.find("p");
    const $globalNoMatch = $("#globalNoMatch"); // 全局无匹配提示元素

    $("#searchInput").on("keyup", function () {
        const value = $(this).val().toLowerCase().trim();
        
        // 输入为空时，恢复显示所有内容并隐藏无匹配提示
        if (!value) {
            $h4s.show();
            $ps.show();
            $globalNoMatch.hide();
            $research.find(".noresults").hide();
            return;
        }

        // 先隐藏所有标题、段落和全局提示
        $h4s.hide();
        $ps.hide();
        $globalNoMatch.hide();
        $research.find(".noresults").hide();

        // 筛选出包含关键词的段落
        const $matchedPs = $ps.filter(function () {
            return $(this).text().toLowerCase().indexOf(value) > -1;
        });

        // 存在匹配段落时，显示对应标题和段落
        if ($matchedPs.length > 0) {
            $matchedPs.show();
            $matchedPs.each(function () {
                // 找到当前段落对应的上方最近h4标题并显示
                $(this).prevAll("h4").first().show();
            });
        } else {
            // 全页无匹配时显示全局提示
            $globalNoMatch.show();
        }
    });
});

页面结构调整说明 #

需要在页面中添加一个全局无匹配提示元素，示例：

<div id="globalNoMatch" style="display:none;">无匹配结果</div>

关键优化点 #

• 提前缓存DOM元素，减少重复查询提升性能
• 移除原有局部"no results"提示，统一使用全局提示
• 精准控制仅显示含匹配内容的标题与对应段落
• 处理输入为空的边界情况，恢复全量内容展示

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