隐藏没有指定字符串的 <div>

Question

所以，尽可能简单地说.. 如图所示，我有多个带有文本的 div：

<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>

我想在页面的某处有一个搜索框，我可以在其中输入字符串，例如：“Hello”隐藏最后一个 div，“Hello Hello”隐藏最后两个 div，“Hello Goodbye”隐藏第一个最后，“Goodbye Goodbye”隐藏了前两个 div。输入不必区分大小写，但我希望您输入字符串的顺序很重要。

提前致谢！ -小星星

PS：如果可能的话，我宁愿远离 JQuery。

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';
       }
    });
});​

Answer 2

纯W3C规范：

var forEach = Array.prototype.forEach;    

document.getElementById('inputID').addEventListener('keyup', function( event ) {
    forEach.call(document.querySelectorAll('div'), function( div ) {
        if( div.textContent.split(/\s+/).indexOf( event.target.value ) > -1 ) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    });
}, false);

演示：http://jsfiddle.net/FA2nj/