如何修改jQuery搜索页面过滤器，使其支持按分类标题搜索？

我正在使用一款jQuery搜索过滤器，原本功能是将匹配的<p>标签内容显示在对应的<h4>标题下方。但当前存在问题：当搜索分类标题（比如“Infectious”）时，因为该分类下没有匹配的<p>内容，所以不会显示任何内容。需要修改函数，让它同时支持按分类标题搜索——即搜索分类名称时，能显示对应的<h4>标题及其所有附属<p>内容。

当前使用的函数代码：

$(document).ready(function () {
  $("#searchInput").on("keyup", function () {
    const value = $(this).val().toLowerCase();
    $('#research .noresults, #research h4 , #research p').css('display', 'none');
    const filter_p = $("#research p").filter(function () {
      return ($(this).text().toLowerCase()).indexOf(value) > -1;
    });
    filter_p
      .css('display', 'block')
      .prevUntil('h4')
      .prev('h4')
      .css('display', 'block');
    $('#research h4')
      .not(filter_p.prevUntil('h4').prev('h4'))
      .nextUntil('.noresults')
      .next('.noresults')
      .css('display', 'block');
  });
});

修改后的代码 #

$(document).ready(function () {
  $("#searchInput").on("keyup", function () {
    const value = $(this).val().toLowerCase();
    // 隐藏所有目标元素
    $('#research .noresults, #research h4, #research p').css('display', 'none');

    // 筛选内容匹配的p标签
    const matchedPs = $("#research p").filter(function () {
      return $(this).text().toLowerCase().includes(value);
    });

    // 筛选标题匹配的h4标签
    const matchedH4s = $("#research h4").filter(function () {
      return $(this).text().toLowerCase().includes(value);
    });

    // 显示匹配p标签及其对应标题
    matchedPs.css('display', 'block')
      .prevUntil('h4')
      .prev('h4')
      .css('display', 'block');

    // 显示匹配标题及其下属所有p标签
    matchedH4s.css('display', 'block')
      .nextUntil('h4, .noresults')
      .filter('p')
      .css('display', 'block');

    // 无结果提示：仅当无任何匹配时显示
    if (matchedPs.length === 0 && matchedH4s.length === 0) {
      $('#research .noresults').css('display', 'block');
    }
  });
});

核心改动说明 #

• 新增<h4>标签的独立筛选逻辑，直接判断标题文本是否包含搜索关键词
• 对匹配的<h4>，通过nextUntil('h4, .noresults')精准选中其下属所有<p>内容并显示
• 优化无结果提示触发条件：只有当既没有匹配的内容也没有匹配的标题时，才显示无结果提示

修改后，搜索分类名称时会自动展示对应分类的全部内容，原有按内容搜索的功能不受影响。

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