動態過濾可見分隔元素

我想只顯示在複選框中選擇的分區。這工作正常。我想這樣做是爲了讓用戶每次在搜索框中輸入一個字符時，都會檢查項目列表，因此如果用戶輸入「div 4」並且所有div都被選中，那麼在輸入「4」時，全部將會消失，除了子字符串包含4.動態過濾可見分隔元素

我想這樣做，沒有提交按鈕，動態。

我該怎麼做？

到目前爲止我的代碼是這樣的：

<html> 
    <head> 
    <script type="text/javascript"> 
     <!-- 
     function dynamicSearch() { 
     document.getElementById('search').value 
     } 

     function showMe (it, box) { 
     var vis = (box.checked) ? "block" : "none"; 
     document.getElementById(it).style.display = vis; 
     } 
     //--> 
    </script> 
    </head> 
    <body> 
    <form> 
     <label for="search">Search:</label> 
     <input type="text" name="search" id="search" onkeyup="dynamicSearch()"/> 
     <input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1 
     <input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2 
     <input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3 
     <input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4 
     <input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5 
     <div class="row" id="div1" style="display:none">Show Div 1</div> 
     <div class="row" id="div2" style="display:none">Show Div 2</div> 
     <div class="row" id="div3" style="display:none">Show Div 3</div> 
     <div class="row" id="div4" style="display:none">Show Div 4</div> 
     <div class="row" id="div5" style="display:none">Show Div 5</div> 
    </form> 
    </body> 
</html>

來源

2011-04-25 Johnny Riley

我可以建議更改標題爲「動態過濾可見Div元素」 – 2011-04-25 01:09:50

你可以做一個函數，它會監視document.getElementById('search').value和這個功能結合到onkeyup事件，如果搜索輸入元素。

來源

2011-04-25 01:44:44 mykhal

我該如何去做這件事？我對從這裏走到哪裏感到困惑。 – 2011-04-25 13:21:46

用你所說的更新我的代碼，但我真的不知道如何正確整合它。 – 2011-04-25 13:42:46

這是我剛纔一起砍的東西。它需要充實，但我認爲它顯示了基本的想法。

function dynamicSearch() { 
    var val = document.getElementById('search').value; 
    if (val == '') 
     val = '-1'; 
    var srch = new RegExp(val, "gi"); 
    var els = document.getElementsByClassName('row'); 
    for (var idx in els) { 
     if (idx != parseInt(idx)) 
     continue; 
     var el = els[idx]; 
     if (typeof(el.innerHTML) !== 'undefined') { 
     console.log(el.innerHTML); 
     if (srch.test(el.innerHTML)) { 
      el.style.display = 'block'; 
     } else { 
      el.style.display = 'none'; 
     } 
     } 
    } 
    }

來源

2011-04-25 14:43:34

動態過濾可見分隔元素

回答

相關問題