Highlighting search words like Chrome with jQuery
<p>I have recently done a very simple highlighting with jQuery and a highlight plugin. It looks like this:</p>

<blockquote>
  <p>$('myButton').click(function() {</p>
  
  <p>$('body').highlight($('#myInputText').val());</p>
  
  <p>});</p>
</blockquote>

<p>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?</p>

<p><strong>Thanks Andy, i changed 'this[0]' to 'search[i]' in your code and it works if there is only one 'p' tag</strong></p>

<pre><code>$(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 "&lt;span style='background-color: red;'&gt;" + $1 + "&lt;/span&gt;"
        });

        $(str).html(orgText);
    });    
  });
});
</code></pre>
