Làm nổi bật các từ tìm kiếm như Chrome với jQuery

Question

Gần đây tôi đã thực hiện đánh dấu rất đơn giản với jQuery và một plugin nổi bật. Nó trông giống như thế này:

$ ('myButton') click (function() {

$ ('body') nổi bật ($ ('# myInputText') val());...

});

Nhưng tôi tự hỏi làm thế nào tôi có thể làm Chrome như làm nổi bật, tôi có nghĩa là làm nổi bật các chữ cái bất cứ khi nào tôi nhập vào một số chữ cái trong hộp văn bản mà không gửi. Tôi nghĩ rằng có thể sử dụng một sự kiện keyup ... Bất kỳ ý tưởng?

Cảm ơn Andy, tôi thay đổi 'này [0]' để 'tìm kiếm [i]' trong mã của bạn và nó hoạt động nếu có chỉ là một 'p' tag

$(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

tôi làm excersise nhanh chóng ra khỏi nó, mã:

$(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); 
    });  
    }); 
});​​ 

liên kết: http://jsbin.com/amica3/edit

Answer 2

$('#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()); 
}); 

Answer 3

Tôi đã chỉnh sửa mã của JAndy nên kết quả sẽ khớp với tất cả các lần xuất hiện trong văn bản và tìm kiếm sẽ không phân biệt chữ hoa chữ thường. Link Hy vọng ai đó thấy điều này hữu ích