Question

我需要一个脚本来过滤/搜索具有相同类的不同列表。如果至少有一个搜索名称匹配，我需要脚本来显示列表的标题。如果没有匹配的搜索名称，我需要隐藏列表的标题。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">    

<h1>List 1</h1>
<ul class="myUL">
    <li>Adele</li>
    <li>Agnes</li>
</ul>

<h1>List 2</h1>
<ul class="myUL">
    <li>Billy</li>
    <li>Bob</li>
</ul>

<h1>List 3</h1>
<ul class="myUL">
    <li>John</li>
    <li>Jack</li>
</ul>



<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.querySelectorAll(".myUL");
    li = ul.getElementsByTagName('li');
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

实施例：如果我搜索“l”，结果必须是：

<h1>List 1</h1>
<ul class="myUL">
    <li>Adele</li>
</ul>

<h1>List 2</h1>
<ul class="myUL">
    <li>Billy</li>
</ul>

谢谢你

Answer 1

当你执行ul = document.querySelectorAll(".myUL");这实际上返回了一个元素数组，所以当你运行li = ul.getElementsByTagName('li');它实际上试图引用一个数组，而不是一个单独的元素。

如果循环遍历ul的值并将该函数的其余部分包含在此循环中，它将按预期工作。

请参阅此处的示例：JSFiddle

过滤/搜索具有不同标题的相同类别的不同列表

1 个答案: