Question

I have a one page website that I am trying to add a search feature to. Using pure javascript (no jquery) I want to take whatever word/phrase is entered in the search box, and search the content/HTML of different li’s. I’m guessing I’ll have to use some combination of innerHTML and .indexOf, but I’m not sure. Here is a link to the site I am referring to http://www.executiveinsurance.com/ Any help would be much appreciated!!!

Answer 1

Just to start with, you can build on this

function search()
{
    var lis = document.getElementsByTagName("li");
    var searchText = document.getElementById("searchBox").value;

    for(var i=0;i<lis.length;i++)
    {
        if(lis[i].innerHTML.indexOf(searchText) > -1)
           lis[i].style.color = 'red';
    }
}​

Just if you care to highlight the specific words

lis[i].innerHTML = lis[i].innerHTML.replace(searchText,'<span style="color:red">'+searchText+'</span>');

SEE JsFiddle DEMO HERE