Как использовать 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();
});

Это работает! И это на самом деле отфильтровывает вещи. Мой вопрос: как вы выделяете слова , которые там появляются (запрос и соответствующий текст в DIV)?

Answer 1

Я бы взял для этого плагин выделения jQuery . Использование его в проекте теперь для отражения результатов поиска 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/