用jQuery突出显示Chrome之类的搜索词 [英] Highlighting search words like Chrome with jQuery

问题描述

我最近使用jQuery和Highlight插件做了一个非常简单的突出显示.看起来像这样:

I have recently done a very simple highlighting with jQuery and a highlight plugin. It looks like this:

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

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

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

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

});

但是我不知道该如何像突出显示Chrome那样做，我的意思是每当我在文本框中输入某些字母而不提交时突出显示这些字母.我想也许可以使用keyup事件...有什么想法吗?

But I wonder how can I do the Chrome like highlighting, I mean highlight the letters whenever I type in some letter in textbox without submitting. I think maybe use a keyup event... Any ideas?

感谢安迪，我在您的代码中将'this [0]'更改为'search [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);
    });    
  });
});

推荐答案

我从中快速做出了选择，代码:

I made quick excersise out of it, code:

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

这篇关于用jQuery突出显示Chrome之类的搜索词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！