javascript - 简单的 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";
    }
  }
}