asp.net 如何在div中搜索内容并突出显示内容所在的div标题

kxeu7u2r 于 2023-03-31 发布在 .NET

关注(0)|答案(1)|浏览(171)

我是新的asp.net环境和编码完全。我有一个ASP.NET视图，其中我有一个div，它是从数据库动态带来的数据。如下所示：
内容以标题的形式出现，然后是内容。如下所示：“内容标题”“内容”

我想搜索页面上的内容，并突出显示内容所在的标题。而不是搜索的单词。目前，当我搜索任何单词时，它会以特定颜色显示我在代码中编写的整个内容，并且还会搜索搜索栏中的每个字母。
例如：搜索栏输入为“test”内容1：“测试图片”内容二：“你好”
因此，它突出显示了两个内容，因为内容2中也有“e”和“t”。
我尝试了jQuery filter函数来搜索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”时，得到的输出如下：

asp.net

来源：https://stackoverflow.com/questions/75879209/how-to-search-content-in-div-and-highlight-the-div-title-in-which-the-content-ex

1条答案

按热度按时间

nqwrtyyt1#

这里完整的解决方案（也是更通用的方式）有两种不同的行为方法。

$('input[data-filter]').on('keyup', function () {
  var target = $(this).data('filter');
  var value = $(this).val().toLowerCase();
  $(target).filter(function () {
    var text = $(this).text().toLowerCase();
    $(this).toggle(text.indexOf(value) > -1);
  })
});
$('input[data-filter2]').on('keyup', function () {
  var target = $(this).data('filter2');
  var value = $(this).val().toLowerCase();
  $(target).removeClass('highlight');
  $(target).filter(function () {
    var text = $(this).text().toLowerCase();
    return value != '' && text.indexOf(value) > -1
  }).addClass('highlight');
});

.highlight{color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Search</label>
<input data-filter="#content_div *" />
<label>Search (Color:RED)</label>
<input data-filter2="#content_div *" />
<div id="content_div">
  <div>t</div>
  <div>te</div>
  <div>tes</div>
  <div>test</div>
</div>

赞(0）回复(0）举报 2023-03-31

我来回答

asp.net 如何在div中搜索内容并突出显示内容所在的div标题

1条答案

相关问题

热门标签

最新问答