javascript - 隐藏一个没有指定字符串

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

在纯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/

Answer 2

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