Question

假设我有这个HTML代码：

<div class="person">
Mike Mulky
</div>

<div class="person">
Jenny Sun
</div>

<div class="person">
Jack Kickle
</div>

这个JQuery thingy实际上会过滤匹配的查询。例如，当用户键入文本框时。

$('#userInputTextbox').keypress(function(){
    $('div.person').hide().filter(':contains("'+THE_QUERY+'")').show();
});

这个有效！它实际上过滤掉了东西。我的问题是：你如何突出显示在那里的字词（查询和DIV中的匹配文字）？

Answer 1

我为此抓住了jQuery highlight plugin。现在在项目中使用它来反映AJAX搜索结果，效果很好，非常轻/简单。

在您的情况下，只需在链中添加.highlight(THE_QUERY)。

$('#userInputTextbox').keypress(function(){
    $('div.person').hide().removeHighlight()
      .filter(':contains("'+THE_QUERY+'")').highlight(THE_QUERY).show();
});

概念很简单，找到文本将其包装在<span class="highlight"></span>中，您可以根据需要设置.highlight样式。当然有.removeHighlight()匹配。

Answer 2

对于宽松的jQuery高亮插件，您可能需要考虑http://frightanic.com/web-authoring/lenient-jquery-highlight-plugin/

如何使用JQuery突出显示文本

2 个答案: