HighlIght search term using javascript in an html

Question

this is my scenario ; I have an html as below, how can I highlight the search term in the results using Javascript ?

I mean when I type : Ho -> the first 2 letter of HOME will be highlighted. If I search for HOME : the whole word in the result will be highlighted.

1 hour ago was question like this with working example code: http://stackoverflow.com/q/17520307/2524304 — Maxim Zhukov, Jul 08 '13 at 07:49
Think, how to highlight a sub-string in a string, so concept will be more clear. Post some code that you have tried so far. — The Alpha, Jul 08 '13 at 07:58
Possible Duplicate: http://stackoverflow.com/questions/17510852/highlight-search-term-in-javascript-according-to-term/17511124#17511124 — Abhitalks, Jul 08 '13 at 08:06

score 1 · Answer 1 · answered Jul 08 '13 at 08:06

Here is a very basic example:

HTML

Search: <input id="test"/>
<ul id="results"></ul>

Javascript

var results = ["Result1 Description", "Result2 Description", "Result3 Description"];

$("#test").change(function(){
    $("#results").empty();
var searchTerm = $(this).val();


for(var i = 0; i < results.length; i++){
    if(results[i].indexOf(searchTerm) != -1){

        $("#results").append("<li>"+ results[i].replace(searchTerm, "<span class=\"wrap\">" + searchTerm + "</span>") + "</li>");
    }
}
});

Working Example http://jsfiddle.net/t3BZ6/

@BrianTimJesus Are you viewing the example or copying and pasting the code? In the example, try typing `sult` in the textbox then firing the change event by pressing tab. — Kevin Bowersox, Jul 08 '13 at 08:14

HighlIght search term using javascript in an html

1 Answers1

Linked