Подсветка поисковых слов, таких как Chrome, с помощью jQuery

Question

Недавно я сделал очень простую подсветку с помощью jQuery и плагина выделения. Это выглядит так:

$ ('myButton'). Click (function () {

.

$ ( 'тело') выделить (. $ ( '# MyInputText') Вал ());

});

Но мне интересно, как я могу делать Chrome как подсветку, я имею в виду выделять буквы всякий раз, когда я набираю какую-то букву в текстовом поле без отправки. Я думаю, может быть, использовать событие keyup ... Есть идеи?

Спасибо, Энди, я изменил 'this [0]' на 'search [i]' в вашем коде, и он работает, если есть только один тег 'p'

$(document).ready(function(){
  var search = ['p', 'div', 'span'];

  $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = search[i];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});

Answer 1

Я быстро сделал из этого код, код:

    $(document).ready(function(){
    var search = ['p', 'div', 'span'];

    $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = this[0];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});​​

ссылка: http://jsbin.com/amica3/edit

Answer 2

Я отредактировал код JAndy, чтобы результат совпадал со всеми вхождениями в тексте, а поиск не учитывал регистр. Ссылка Надеюсь, кто-то найдет это полезным

Answer 3

$('#myInputText').keypress(function(e) {
    switch (e.keyCode) {
        case 13: // "Enter" was pressed; handle it if you want
            return false;

        case 27: // ESC was pressed; handle it if you want
            return false;
    }

    $('body').highlight($(this).val());
});