2010-03-31 14 views
5

Ho recentemente effettuato un'evidenziazione molto semplice con jQuery e un plug-in highlight. Ecco come si presenta:Evidenzia parole di ricerca come Chrome con jQuery

$ ('myButton') clicca (function() {

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

});

Ma mi chiedo come posso fare l'evidenziazione di Chrome, intendo evidenziare le lettere ogni volta che digito una lettera nella casella di testo senza inviare. Penso che forse usi un evento di keyup ... Qualche idea?

Grazie Andy, ho cambiato 'questo [0]' a 'cercare [i]' nel codice e funziona se c'è un solo tag '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); 
    });  
    }); 
}); 

risposta

5

I fatta excersise rapido fuori di esso, il codice:

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

+0

grazie mille. codice molto utile! – ilkin

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

Ho modificato il codice di JAndy in modo che il risultato corrisponda a tutte le occorrenze nel testo e la ricerca non sia sensibile al maiuscolo/minuscolo. Link Spero che qualcuno trovi questo utile

Problemi correlati