简单的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>