如何使用jQuery來突出顯示文本

Question

假設我有這樣的HTML代碼：

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

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

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

這個jQuery啄實際上將過濾匹配的查詢。例如，當用戶輸入文本框時。

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

This Works！它實際上過濾了這些東西。我的問題是：你如何突出顯示在那裏出現的單詞（查詢和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/