簡單的JavaScript過濾器/搜索多個列表，而不是隻有一個？

Question

我有一些簡單的代碼，允許過濾列表項目，它幾乎完美的作品。唯一的問題是搜索框只搜索第一個UL，我該如何搜索它們？

的Javascript：

<script> 
function myFunction() { 
    // Declare variables 
    var input, filter, ul, li, a, i; 
    input = document.getElementById('myInput'); 
    filter = input.value.toUpperCase(); 
    ul = document.getElementById("myUL"); 
    li = ul.getElementsByTagName('li'); 

    // Loop through all list items, and hide those who don't match the search query 
    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> 

HTML：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search"> 
<ul id="myUL" class="ul1"> 
    <li><a href="#">bob</a></li> 
    <li><a href="#">rob</a></li> 

    <li><a href="#">tom</a></li> 
    <li><a href="#">mark</a></li> 
</ul> 

<ul id="myUL" class="ul2"> 
    <li><a href="#">purse</a></li> 
    <li><a href="#">cat</a></li> 

    <li><a href="#">pencil</a></li> 
    <li><a href="#">sharpner</a></li> 
</ul> 

Answer 1

通過使用獨特的ID和同一類

<ul id="myUL1" class="ul"> 
    <li><a href="#">bob</a></li> 
    <li><a href="#">rob</a></li> 

    <li><a href="#">tom</a></li> 
    <li><a href="#">mark</a></li> 
</ul> 

<ul id="myUL2" class="ul"> 
    <li><a href="#">purse</a></li> 
    <li><a href="#">cat</a></li> 

    <li><a href="#">pencil</a></li> 
    <li><a href="#">sharpner</a></li> 
</ul> 

開始，然後你修改腳本目標都LI的，無論的UL，只要它具有那個級別

function myFunction() { 

    var input = document.getElementById('myInput'), 
     filter = input.value.toUpperCase(), 
     li  = document.querySelectorAll(".ul li"); 

    // Loop through all list items, and hide those who don't match the search query 
    for (var i = 0; i < li.length; i++) { 
    var a = li[i].querySelector("a"); 

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

Answer 2

您可以使用document.querySelector選擇兩個列表中的孩子：

function myFunction() { 
 
    var query = document.querySelector('#myInput').value; 
 
    
 
    // this wil grab all <li> elements from all <ul> elements on the page 
 
    // however, you will want to specify a unique attribute for only the elements you wish to include 
 
    var elements = document.querySelectorAll('ul > li'); 
 
    
 
    for (var i = 0; i < elements.length; i ++) { 
 
    var el = elements[i]; 
 
    if (el.innerText.indexOf(query) !== -1) 
 
     el.style.display = ''; 
 
    else 
 
     el.style.display = 'none'; 
 
    } 
 
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="search"> 
 
<ul id="myUL" class="ul1"> 
 
    <li><a href="#">bob</a></li> 
 
    <li><a href="#">rob</a></li> 
 

 
    <li><a href="#">tom</a></li> 
 
    <li><a href="#">mark</a></li> 
 
</ul> 
 

 
<ul id="myUL2" class="ul2"> 
 
    <li><a href="#">purse</a></li> 
 
    <li><a href="#">cat</a></li> 
 

 
    <li><a href="#">pencil</a></li> 
 
    <li><a href="#">sharpner</a></li> 
 
</ul>