Question

So, to put this as simply as I can..
I have multiple divs with text in them as shown:

<div id=1 style="position:relative"><font color=color>Hello Hello</font></div>
<div id=2 style="position:relative"><font color=color>Hello Goodbye</font></div>
<div id=3 style="position:relative"><font color=color>Goodbye Goodbye</font></div>

I would like to have a search box somewhere on my page that I can input strings into, for example: “Hello” hides the last div, “Hello Hello” hides the last two divs, “Hello Goodbye” hides the first and last, and “Goodbye Goodbye” hides the first two divs. The input does not have to be case sensative, but I’d prefer the order you input the strings to matter.

Thanks in advance!
-Starletts

PS: I’d prefer to stay out of JQuery if possible.

Answer 1

HTML:

<input type="text" id="my_input">

Javascript:

document.getElementById('my_input').addEventListener('keyup', function () {
    var search_for = this.value;
    var divs = document.getElementsByTagName('div');
    Array.prototype.forEach.call(divs, function (div) {
       if (search_for && div.textContent.toLowerCase().indexOf(search_for.toLowerCase()) > -1) {
           div.style.display = 'none'; // to hide
       }
       else {
           div.style.display = 'block';
       }
    });
});​