簡單的javascript過濾器/搜索多個列表，而不只是一個？

Question

我有一些簡單的代碼，可以過濾列表項，並且效果幾乎完美。 唯一的問題是搜索框僅搜索第一個UL，我如何使其同時搜索兩個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>