Div/a 元素的基本过滤器/搜索列表答案

【问题标题】：Basic filter/search list of Div/a elementsDiv/a 元素的基本过滤器/搜索列表
【发布时间】：2021-06-20 11:08:27
【问题描述】：

我真的是 JavaScript 新手。

我正在寻找类似下面链接的“基本过滤器/搜索列表”，但使用元素“DIV”和“A”而不是“UL”和“LI”。

你能帮我弄清楚吗？ :( 我想我离预期的结果并不远，但我失败了。请不要粗鲁，我试图了解它是如何工作的。下面是我的实际代码：

<div id="myDIV">
    <a href="#">Banana</a>
        <a href="#">Apple</a>
        <a href="#">Tomato</a>
        <a href="#">Peach</a>
  </div>

<script>
function myFunction() {
    var input, filter, div, a, aInDiv, i, txtValue;

    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDIV");
    aInDiv = div.getElementsByTagName("a");

    for (i = 0; i < aInDiv.length; i++) {
        a = aInDiv[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;

        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            aInDiv[i].style.display = "";
        } else {
            aInDiv[i].style.display = "none";
        }
    }
}
</script>

【问题讨论】：

恕我直言，您的问题是什么？
您没有执行您的功能，并且您的示例中有一些错误。我在下面的答案中修复了它。

标签： javascript html list filter

【解决方案1】：

一些事情：

永远记住，声明函数与运行函数不同。如果函数体内有代码，则必须调用该函数来执行代码。
您的示例中没有输入，导致所有a 元素都被赋予display: none 属性，将它们全部过滤掉。

<div id="myDIV">
    <a href="#">Banana</a>
        <a href="#">Apple</a>
        <a href="#">Tomato</a>
        <a href="#">Peach</a>
  </div>

<script>
function myFunction() {
    var input, filter, div, a, aInDiv, i, txtValue;

    div = document.getElementById("myDIV");
    aInDiv = div.getElementsByTagName("a");

    for (i = 0; i < aInDiv.length; i++) {
        a = aInDiv[i];
        txtValue = a.textContent || a.innerText;

        aInDiv[i].style.display = "block";
    }
}
myFunction()
</script>

【讨论】：