Question

This is a simple search function with highlight effect, however, it highlight the whole word instead of the matched strings.

How can I make it like doing ctrl+f in browser that highlights just part of the matched word?

$(document).ready(function(){
    $('input').keyup(function(){

       $("ul li").removeClass('hightlight');

       var searchInput = $(this).val();

        if(searchInput !== ""){
           $("ul li:contains('" + searchInput + "')").addClass('hightlight');
        }

    });
});

My code online:

http://jsfiddle.net/dennisboys/5ZEf7/1/

Answer 1

Use following javascript:

$(document).ready(function(){
    $('input').keyup(function(){

       var searchInput = $(this).val();

       $('.hightlight').contents().unwrap();

       if(searchInput !== ""){
            $("ul li:contains('" + searchInput + "')").each(function(i, e) {
                var text = $(this).text().replace(new RegExp(searchInput, 'gm'), '<span class="hightlight">' + searchInput + '</span>');
                $(this).html(text);
            })
        }

    });
});