搜索功能未过滤所有值

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";
        }
    }
}

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

搜索功能有效，但是仅过滤到第一个值。例如。如果我搜索“龙”，并且在滚动列表中有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>

Answer 2

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

以下代码将正常工作。

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";
        }
    }
}