我正在尝试在 VISUAL STUDIO 中使用 javascript 创建一个搜索栏，但我还没有成功

Question

html 文件：我使用了一些 div，在里面我介绍了一些标题和图像。

在搜索栏中，我只希望当我输入标题时，当我搜索时，完整的 div 会出现在屏幕上。

<body>
    <div class="input">
        <input type="text" placeholder="Search.." id="searchbar" onkeyup="search_bar()">
        <button type="submit"><i class="fa fa-search"></i></button>
    </div>
    <div class="s10plus" id="divs">
        <h2>Samsung Galaxy S10 Plus</h2>
        <img src="Images/s10plus.png"></img>
        <p id="precios10">Price : $600</p>
    </div>
    <div class="samsunga10">
        <h2>Samsung Galaxy A10</h2>
        <img src="Images/a10.png"></img>
        <p id="precioa">Price:$600</p>
    </div>
    <div class="samsunga20">
        <h2>Samsung Galaxy A20</h2>
        <img src="Images/a20.png"></img>
        <p id="precio">Price:$600</p>
    </div>
</body>

文件.js

function search_bar() {
    var a;
    var search = document.getElementById('searchbar');
    var filter = search.input.toLowerCase();
    var ul = document.getElementsByClassName('s10plus');
    var nodes = ul.getElementsByTagName('h2').length;

    for (i = 0; i < nodes; i++) {
        a = nodes[i].getElementsByTagName('h2')[0];
        if (a.innerHTML.toLowerCase().indexOf(filter) > -1) {
            nodes[i].style.display = "";
        } else {
            nodes[i].style.display = "none";
        }
    }
}

Answer 1

你能分享一个 Codepen 或 Codesandbox 或者在 SO 中添加一个片段吗？

在您的 Js 代码中：“li”未定义，这使得您很难准确理解您的代码。 此外，设置显示：“”不是有效的 css 属性。 我建议将其设置为显示：“继承”。

class“s10plus”位于：

          var ul = document.getElementsByClassName('s10plus');

将始终获得 1 个元素，因为在您的 html 中只有一个 div 具有该 class。

尝试调整这些问题，看看是否可以进一步

我正在尝试在 VISUAL STUDIO 中使用 javascript 创建一个搜索栏，但我还没有成功

问题描述

1 个解决方案

解决方案1
0 2020-06-26 12:50:44

我正在尝试在 VISUAL STUDIO 中使用 javascript 创建一个搜索栏，但我还没有成功

问题描述

1 个解决方案

解决方案1 0 2020-06-26 12:50:44

解决方案1
0 2020-06-26 12:50:44