如何在ASP.NET页面的div中搜索内容并高亮对应标题

解决方案 #

首先要规范动态加载的内容结构，确保每个「标题+内容」条目有独立容器，且标题有专属类名，示例结构如下：

<!-- 动态加载到#content_div中的每个条目示例 -->
<div class="content-item">
  <h4 class="item-title">标题1</h4>
  <div class="item-content">这里是包含test的内容文本</div>
</div>
<div class="content-item">
  <h4 class="item-title">标题2</h4>
  <div class="item-content">这里是Content 2的文本，只有t、e这些单个字符</div>
</div>

替换你原有的jQuery代码为以下版本，即可实现搜索内容时只高亮对应标题，且仅当内容完整包含搜索词时触发：

<script>
jQuery("#search").on("keyup", function () {
    var searchValue = $(this).val().toLowerCase().trim();
    // 重置所有标题样式和条目显示状态
    $(".content-item").show();
    $(".item-title").css("color", "");

    if (searchValue === "") return;

    // 遍历每个内容条目
    $(".content-item").each(function() {
        var contentText = $(this).find(".item-content").text().toLowerCase();
        // 检查内容是否包含完整搜索词
        if (contentText.indexOf(searchValue) > -1) {
            // 高亮对应标题
            $(this).find(".item-title").css("color", "red");
        } else {
            // 隐藏不匹配的条目（不需要隐藏可删除此行）
            $(this).hide();
        }
    });
});
</script>

关键修正说明 #

• 不再选择#content_div *（所有子元素），而是精准定位条目容器.content-item、标题.item-title和内容.item-content，避免误匹配单个字符的元素
• 仅检查内容区域的文本是否包含搜索词，匹配成功后只给对应标题添加高亮样式
• 增加搜索词为空时的重置逻辑，避免残留高亮样式
• 可选隐藏不匹配条目，让页面仅显示符合条件的内容（不需要可删除$(this).hide();）

如果你的动态内容结构和示例不同，只需将代码中的类名替换为你实际使用的类名即可。

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