javascript - 搜索功能不会过滤所有值

Question

我正在开发一个带有网页滚动列表的搜索功能。这是我的 JS:

function mysearchFunction() {

    var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("mysearchInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");

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

和 HTML

<th>
    <input type="text" id="mysearchInput" onkeyup="mysearchFunction()" placeholder="Search for location..." title="Location">
        <button onclick="mysearchFunction();">Search</button>
        <ul id="myUL">
        <li><a href="">IT</a><li>
        <li><a href="">Dragon's Room</a></li>
        <li><a href="">Door 4</a></li>
        <li><a href="">Cafeteria </a></li>
        <li><a href="">Dragons Den </a></li>
        <li><a href="">Dragons Tail </a></li>
        <li><a href="">Dragon </a></li>
        </ul>
</th>
</html>

搜索功能可以工作，但它只会过滤到第一个值。例如。如果我搜索“dragon”，并且滚动列表中有 3 条龙，则会产生“Dragon、Car、Cat、Dragon1、Dragon2”的结果如果问题太基本，我很抱歉。我还在学习 JS 和 Web 开发，所以我不确定如何解决这个问题。

Answer 1

我认为问题可能在于您如何调用该函数。

请参阅下面的工作演示，其中包括按钮上的单击事件以触发该功能。

function mysearchFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("mysearchInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");

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

<input id="mysearchInput" type="text" placeholder="search" />
<button onclick="mysearchFunction();">Search</button>

<ul id="myUL">
  <li><a>Dragon</a></li>
  <li><a>Car</a></li>
  <li><a>Cat</a></li>
  <li><a>Dragon1</a></li>
  <li><a>Dragon2</a></li>
</ul>

更新在 OP 共享 HTML 后，很明显缺少结束标签导致了问题:

<li><a href="">IT</a><li> // closing </li> needed