Wyróżnianie słów wyszukiwania takich jak Chrome z jQuery

Question

Niedawno zrobiłem bardzo proste podświetlanie za pomocą wtyczki jQuery i highlight. Wygląda to tak:

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

$ ('body') Highlight ($ ('# myInputText') val());...

});

Ale zastanawiam się, jak mogę zrobić Chrome jak podświetlanie, mam na myśli podkreślenie liter, gdy piszę jakąś literę w polu tekstowym bez przesyłania. Myślę, że może wykorzystam wydarzenie typu keyup ... Jakieś pomysły?

Dzięki Andy, zmieniłem 'to [0]' do 'szukaj [i]' w kodzie i to działa, jeśli jest tylko jeden znacznik '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

I wykonane szybkie excersise z niego, kod:

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

Link: 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

Edytowałem kod JAndy'ego, aby wynik pasował do wszystkich wystąpień w tekście, a wyszukiwanie nie uwzględnia wielkości liter. Link Mam nadzieję, że ktoś znajdzie to pomocne