搜索功能不会过滤所有值

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>

搜索功能有效，但它只过滤到第一个值。例如。如果我搜索“龙”，并且滚动列表中有 3 条龙，则会产生“龙、车、猫、龙 1、龙 2”的结果 如果问题太基本，我很抱歉。我还在学习 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

Answer 2

我刚刚注意到问题所在。可能是因为li 为空，您的代码在执行for 短语时出错。

以下代码可以正常工作。

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];

/***** updated code from here ******/
        if (a) {
          txtValue = a.textContent || a.innerText;
        } else {
          txtValue = '';
        }
/***** updated code to here ******/
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } 
        else {
            li[i].style.display = "none";
        }
    }
}