How to hightlight the text of matched terms in jquery?

Question

I have list of Items and a search box. if search term entered into the search box the matched text should appear with bold letters in the list irrespective of the case(case insensitive). I have done up to some level but later i dont know how to do it, as i am new to the jquery.

<html>
<head>
    <script type="text/javascript" 
          src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $(".SearchElement").keyup(function(){
            keyword = $(".SearchElement").val();
            if(keyword.length>=3){
                 var content = $(".wrapperbox ul li").text();
                 test = content.match(/keyword/gi)
                 if(test){
                     //alert(test);
                 }
            }
          });
        });
    </script>
</head>
<body>
    <form action="">
        <label>SearchTerm:</label> <input type="text" 
        name="SearchBox" value="" class="SearchElement" />
    </form>
    <div class="wrapperbox">
        <ul>
            <li>TestString</li>
            <li>testString</li>
            <li>Kanigiri</li>
            <li>KANIGIRI</li>
        </ul>
    </div>
</body>
</html>

How can i do that, any help will be greatly appriciated. Thank you

Take a look at my answer to [this question](http://stackoverflow.com/questions/12505602/slow-highlighting-in-firefox/12505656#12505656). — elclanrs, Nov 13 '12 at 23:00
Please provide a better title so that future searchers will be able to find this. — Lee Taylor, Nov 13 '12 at 23:07

score 1 · Accepted Answer · answered Nov 13 '12 at 23:08

<html>
<head>
    <script type="text/javascript" 
          src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#SearchElement").keyup(function(){
            keyword = $("#SearchElement").val();
            if(keyword.length>=3){
                 $(".wrapperbox ul li").each(function(index) {
                      var content =  = $(this).text());
                      test = content.match(/keyword/gi);
                      if (test){
                           $(this).replaceWith( "<li><b>" + $(this).text() + "</b></li>" );
                      }                      
                 });

            }
          });
        });
    </script>
</head>
<body>
    <form action="">
        <label>SearchTerm:</label> <input type="text" 
        name="SearchBox" id="SearchBox" value="" class="SearchElement" />
    </form>
    <div class="wrapperbox">
        <ul>
            <li>TestString</li>
            <li>testString</li>
            <li>Kanigiri</li>
            <li>KANIGIRI</li>
        </ul>
    </div>
</body>
</html>

use an ID to reference your form input
use a each() loop
basically fiddle about and find replace within that loop (I did a weak version - untested, and based on your code, to help you) but hopefully you can see where I am going

Thank you very much for your reply, i need to highlight only the matched text. How can i do that ? — user964147, Nov 13 '12 at 23:19
find / replace.. in the each loop try `$(this).text = $(this).text.replace(keyword, "" + keyword + "");` — conners, Nov 13 '12 at 23:22
it's something like that.. you might have to replace inside the `.html()` rather than the `.text()` — conners, Nov 13 '12 at 23:24

How to hightlight the text of matched terms in jquery?

1 Answers1