自定義Javascript搜索，消除與搜索參數不匹配的元素

Question

所以我試圖創建一個搜索功能，該頁面充滿了鏈接，分成不同的部分，使人們更容易找到他們的特定鏈接通過消除所有與他們所尋找的信息無關的信息來尋找。

我希望搜索將與搜索參數不匹配的元素更改爲「display：none;」不過，我似乎無法弄清楚如何製作其列表項目爲「display：none;」的部分也「顯示：無;」因此如果該部分不包含搜索參數，則該部分不再出現。

這裏是我的代碼：

<input type="text" id="myInput" onkeyup="mySearch()" 
placeholder="Search this page!"> 
<div id="content"> 
<section class="parent"> 
       <h2>heading two</h2> 
       <ul class="child"> 
        <li><a href="#">list item 1</a></li> 
        <li><a href="#">list item 2</a></li> 
       </ul> 
      </section> 

      <section class="parent"> 
       <h2>heading two</h2> 
       <ul class="child"> 
        <li><a href="#">list item 3</a></li> 
        <li><a href="#">list item 4</a></li> 
       </ul> 
</section> 
</div> 

<script> 
var input, filter, ul, li, a, i, parentDivs, children; 
input = document.getElementById('myInput'); 
filter = input.value.toUpperCase(); 
ul = document.getElementById("content"); 
li = ul.getElementsByTagName('li'); 
sect = ul.getElementsByTagName('section'); 
parentDivs = document.getElementsByClassName("parent"); 
children = document.getElementsByClassName("child"); 

for (i = 0; i < li.length; i++) { 
a = li[i].getElementsByTagName("a")[0]; 
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
    li[i].style.display = ""; 
} else { 
    li[i].style.display = "none"; 
    } 
} 
</script> 

Answer 1

我做你的代碼稍加修改，這樣它會經過所有家長的div並獲得childNodes然後進行遍歷所有那些同時使用計數器c如果它計數到與元素列表相同的長度，它也會將該div設置爲display:none。

function mySearch() { 
    var input, filter, ul, li, a, i, parentDivs, children; 
    input = document.getElementById('myInput'); 
    filter = input.value.toUpperCase(); 
    ul = document.getElementById("content"); 
    li = ul.getElementsByTagName('li'); 
    sect = ul.getElementsByTagName('section'); 
    parentDivs = document.getElementsByClassName("parent"); 
    children = document.getElementsByClassName("child"); 

    if (filter.length > 3) { 
    console.log(filter.length); 
    for (var x = 0; x < parentDivs.length; x++) { 
      parentDivs[x].style.display = ""; 
    } 
    } 

    for (var p = 0; p < parentDivs.length; p++) { 
    var c = 0; 
    var nodes = parentDivs[p].childNodes[3].getElementsByTagName("li"); 
    for (var i = 0; i < nodes.length; i++) { 

     var a = nodes[i].querySelectorAll("a"); 

     if (a[0].innerHTML.toUpperCase().indexOf(filter) > -1) { 
     nodes[i].style.display = ""; 
     } else { 
     nodes[i].style.display = "none"; 
     c++; 
     } 
    } 

    if (c === nodes.length) { 
     parentDivs[p].style.display = "none"; 
    } 
    } 
} 

這裏是一個的jsfiddle我的回答https://jsfiddle.net/nq7Lfz1o/5/它使用"TEXT"作爲一個過濾器，而不是輸入到顯示solution.This還包括重置，所以你可以回去的地方，一切都如果長度所示的狀態大於3.