如何在div中搜索内容并高亮显示内容所在的div标题

问题描述 投票:0回答:0

我完全不熟悉 asp.net 环境和编码。我有一个 asp.net 视图,其中有一个 div,它从数据库中动态获取数据。如下:

内容以标题的形式出现,然后是内容。如下: “内容标题” “内容”

enter image description here

我想搜索页面上的内容,并突出显示内容所在的标题。而不是搜索的词。目前,当我搜索任何单词时,它会以我在代码中编写的特定颜色向我显示全部内容,并且还会搜索搜索栏中的每个字母。

例如:Searchbar输入是“test” 内容一:“测试图片” 内容二:“你好”

所以它突出了两个内容,因为内容2中也有“e”和“t”。

我尝试了 jQuery 过滤器功能来搜索 div 中键入的输入

//Here is the Code.
<label>
    <div>
        <div class="filter-title">Search</div>
        <input id="search" type="search" class="inputbox" /></div>

   <script>
        jQuery("#search").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        jQuery("#content_div *").filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1).css('color', 'red')
        });
    });
   </script>
</label>
<div class="col-lg-12 acc-lastbor" id="content_div"></div>

在搜索框中搜索单词“test”时得到的输出如下:

enter image description here

javascript c# jquery asp.net
© www.soinside.com 2019 - 2024. All rights reserved.