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

【问题标题】：I am trying to create a search bar using javascript in VISUAL STUDIO but I have not yet succeeded我正在尝试在 VISUAL STUDIO 中使用 javascript 创建一个搜索栏，但我还没有成功
【发布时间】：2020-06-26 11:54:12
【问题描述】：

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";
        }
    }
}

【问题讨论】：

你“还没有成功”是什么意思？你看到错误了吗？您遇到的实际问题是什么？

标签： javascript java html css

【解决方案1】：

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

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

“s10plus”类在：

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

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

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

【讨论】：

感谢您的回答。但首先我想知道搜索栏是否显示我输入的 div，如果它显示我，那么我将能够为其他 div 工作。