使用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 希望有人认为这有帮助