使用jQuery突出顯示Chrome之類的搜索詞

Question

我最近用jQuery和高亮插件做了一個非常簡單的突出顯示。它看起來像這樣：

$（ 'myButton的'）點擊（函數（）{

$（ '主體'）的亮點（$（ '＃myInputText'）VAL（））;。

}）;

但我不知道如何才能做Chrome瀏覽器突出顯示，我的意思是突出顯示字母，只要我在文本框中鍵入一些字母而不提交。我想也許使用關鍵事件...任何想法？

感謝安迪，我改變了 '這[0]' 在您的代碼 '搜索[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

我快發excersise出來，代碼：

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

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

我編輯了JAndy的代碼，因此結果將匹配文本中的所有事件，並且搜索不區分大小寫。 Link 希望有人認爲這有幫助