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

Question

html File: I have used some divs and inside i have introduced some titles and images. html 文件：我使用了一些 div，在里面我介绍了一些标题和图像。

In the search bar i just want that when i enter a title the full div appears on the screen when i search.在搜索栏中，我只希望当我输入标题时，当我搜索时，完整的 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>

file.js文件.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

Could you share a Codepen or Codesandbox or add a snipped here in SO?你能分享一个 Codepen 或 Codesandbox 或者在 SO 中添加一个片段吗？

in your Js code: "li" is not defined which makes it hard to understand your code exactly.在您的 Js 代码中：“li”未定义，这使得您很难准确理解您的代码。 Also, setting display: "", is not a valid css property.此外，设置显示：“”不是有效的 css 属性。 I recommend setting it to display: "inherit".我建议将其设置为显示：“继承”。

The class "s10plus" at: class“s10plus”位于：

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

will always get 1 element since in your html only one div has that class.将始终获得 1 个元素，因为在您的 html 中只有一个 div 具有该 class。

Try to adjust these issues and see if you can get any further尝试调整这些问题，看看是否可以进一步

我正在尝试在 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