如何解决通过JavaScript过滤ul列表,没有正确地通过列表过滤UL列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (51)

我正在尝试为ul实现过滤器列表,但我的JavaScript函数似乎没有接受输入并通过列表进行过滤。我不确定为什么会这样。我也尝试将for循环更改为for (i = 0; i < ul.length; i++)搜索ul,但它似乎也没有响应。

HTML:

<input type="text" id="myMovies" onkeyup="searchTitle()" placeholder="Is your movie on here?">
        <ul id="movieList">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>

使用Javascript:

function searchTitle(){
    var input, filter,  ul, li, a, i;
    input = document.getElementById("myMovies");
    filter = input.nodeValue.toUpperCase();
    ul = document.getElementById("movieList");
    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++){
        a = li[i].getElementsByTagName("a"[0]);
        if (a.innerHTML.toUpperCase().indexof(filter) > -1) {
            li[a].style.display = "";
        }
        else{
            li[a].style.display = "Not found";
        }
    }
}
提问于
用户回答回答于

这是一个完成似乎尝试的样本的示例。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function searchTitle(){
    var input, filter,  ul, li, a, i;
      input = document.getElementById("myMovies");
      filter = input.value.toUpperCase();
      window.status = filter;
    ul = document.getElementById("movieList");
    li = ul.getElementsByTagName("li");

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

  </head>
  <body>
<input type="text" id="myMovies" onkeyup="searchTitle()" placeholder="Is your movie on here?">
        <ul id="movieList">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>   
  </body>
</html>
用户回答回答于

也许这就是你所拥有的线路上的拼写错误a = li[i].getElementsByTagName("a"[0]);,也许你想做什么a = li[i].getElementsByTagName("a")[0];

扫码关注云+社区

领取腾讯云代金券