Question

即使我从列表中删除了所有<a href="#">和</a>标记，该脚本如何运作？请参阅工作示例源代码here 谢谢！

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">    
<ul id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Billy</li>
    <li>Bob</li>
</ul>
<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    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];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

Answer 1

试试这个：

＆＃13;

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("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";
        }
    }
}

＆＃13;

我已经不再需要一个＆＃39; a＆＃39; tag - 它只是在＆＃39; li＆＃39;中直接使用.innerHTML。标签

Answer 2

并非如此困难:(。但这不是一个好习惯......

＆＃13;

function myFunction() {
    var input, filter, ul, li, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("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";
        }
    }
}

＆＃13;

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">    
<ul id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Billy</li>
    <li>Bob</li>
</ul>

＆＃13;

Answer 3

这是一种过滤列表的略有不同的方法。它可以在列表的元素（<a>）中使用或不使用li，也可以使用div或要过滤的列表中的任何元素。它取决于在输入上设置的数据属性，它决定应该过滤哪个列表。

let input = document.getElementById('myInput');

input.addEventListener('input', e => {
  let el = e.currentTarget,
    value = el.value.toUpperCase(),
    list = document.getElementById(el.getAttribute("data-filters")),
    lis = Array.from(list.children);
  lis.forEach(li => {
    li.classList.toggle('hidden', !li.innerText.toUpperCase().includes(value));
  });
});

.hidden {
  display: none;
}

<input type="text" id="myInput" data-filters="myUL" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li>Agnes</li>
  <li>Billy</li>
  <div>Bob</div>
</ul>

请注意，IE不支持classList.toggle的第二个参数，但您可以轻松使用Polyfill。

Answer 4

这可能如何适用于不同的列表和类？

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">    
    <ul class="myUL">
        <li>Adele</li>
        <li>Agnes</li>
        <li>Billy</li>
        <li>Bob</li>
    </ul>
    <ul class="myUL2">
        <li>Adele</li>
        <li>Agnes</li>
        <li>Billy</li>
        <li>Bob</li>
    </ul>
    <ul class="myUL3">
        <li>Adele</li>
        <li>Agnes</li>
        <li>Billy</li>
        <li>Bob</li>
    </ul>

    <script>
    function myFunction() {
        var input, filter, ul, li, a, i;
        input = document.getElementById('myInput');
        filter = input.value.toUpperCase();
        ul = document.getElementById('archive');
        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>

如何在没有链接的情况下过滤/搜索列表

4 个答案: