-1

したがって、これをできるだけ簡単に言えば..次のように、テキストを含む複数の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>

ページのどこかに文字列を入力できる検索ボックスを配置したいと考えています。たとえば、「He​​llo」は最後の div を非表示にし、「Hello Hello」は最後の 2 つの div を非表示にし、「Hello Goodbye」は最初と最後の div を非表示にします。 「Goodbye Goodbye」は最初の 2 つの div を非表示にします。入力は大文字と小文字を区別する必要はありませんが、文字列を入力する順序が重要であることをお勧めします。

前もって感謝します！-スターレッツ

PS: 可能であれば、JQuery を避けたいと思います。

4

2 に答える 2

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/

于 2012-12-07T01:01:37.090 に答える
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';
       }
    });
});​
于 2012-12-07T01:02:03.450 に答える