Question

我有一个搜索结果页面。给定结果列表，我需要能够从输入中突出显示给定的文本字符串。鉴于以下代码，我能够突出显示该术语，但我尝试使用结果列表。目标结果是在返回结果列表中突出显示搜索字符串的每个实例。

HTML

<input type="text" id="searchfor" />
<p id="all_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

CSS

#all_text span {
    text-decoration:underline;
    background-color:yellow;
}

的JavaScript

$('#searchfor').keyup(function () {

    var page = $('#all_text');
    var pageText = page.text().replace("<span>", "");
    var searchedText = $('#searchfor').val();
    var theRegEx = new RegExp("(" + searchedText + ")", "igm");
    var newHtml = pageText.replace(theRegEx, "<span>$1</span>");
    page.html(newHtml);
});

Answer 1

您可以使用jQuery Highlight插件

http://bartaz.github.com/sandbox.js/jquery.highlight.html

突出搜索结果非常出色。可以选择传递数组术语以突出显示而不仅仅是单个术语。这在文档中并不明显，但它在代码顶部的注释中指出。

<强>更新

一次传递多个搜索词（来自源代码顶部的注释）：

// search for and highlight more terms at once
// so you can save some time on traversing DOM
$('#content').highlight(['lorem', 'ipsum']);

使用jquery遍历<li>元素并突出显示搜索文本</li>

1 个答案: