我正在嘗試在 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