根據圖像名稱的搜索輸入過濾數據

Question

I am trying to filter out based on search by name but problem in code.

這是我的 HTML 代碼。

<input type="text" placeholder="Search Products" id="filter_products"/>
            <!-- <ul id="users-list"></ul> -->
            <div class="row" id="products">
                <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
                    <div class="card">
                        <img src="../img/scenery.jpg" class="card-img img-fluid">
                        <div class="card_body">
                            <ul id="products-list"><h2 class="card-title" id="scenery">Scenery</h2></ul>
                        </div>
                        <div>
                            <ul><div class="price">Rs. 150/- </div></ul>
                            <!-- <a href="../html/register.html"><input type="submit" name="" value="Order Now"></a> -->
                            <a href="../html/register.html">
                                <button class="btn btn-outline-danger btn-md">Order Now</button>
                            </a>
                        </div>  
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
                    <div class="card">
                        <img src="../img/photo_frame-1.jpg" class="card-img img-fluid">
                        <div class="card_body">
                            <ul id="products-list"><h2 class="card-title" id="photoframe">Photo Frames</h2></ul>
                        </div>
                        <div>
                            <ul>
                                <div class="price">Rs. 100/- </div>
                            </ul>
                            <a href="../html/register.html">
                                <button class="btn btn-outline-danger btn-md">Order Now</button>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
                    <div class="card">
                        <img src="../img/gift-2.jpg" class="card-img img-fluid">
                        <div class="card_body">
                            <ul id="products-list"><h2 class="card-title" id="gift">Gifts</h2></ul>
                        </div>
                        <div>
                            <ul>
                                <div class="price">Rs. 100/- </div>
                            </ul>
                            <a href="../html/register.html">
                                <button class="btn btn-outline-danger btn-md">Order Now</button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="products">
                <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
                    <div class="card">
                        <img src="../img/toys.jpg" class="card-img img-fluid">
                        <div class="card_body">
                            <ul id="products-list"><h2 class="card-title" id="toys">Toys & Games</h2></ul>
                        </div>
                        <div>
                            <ul>
                                <div class="price">Rs. 200/- </div>
                            </ul>
                            <a href="../html/register.html">
                                <button class="btn btn-outline-danger btn-md">Order Now</button>
                            </a>
                        </div>
                    </div>
                </div>
                


Here is my Javascript code snippet which has problem.

const search = document.getElementById("filter_products");
console.log(search);
const productName = document.querySelectorAll(".card_body .card-title");

search.addEventListener("keyup", filterProducts);

function filterProducts(e) 
{
    const text = e.target.value.toLowerCase();
    productName.forEach(function(product) 
    {
        const item = product.firstChild.textContent;
                
        if (item.toLowerCase().indexOf(text) != -1) 
        {
            product.parentElement.parentElement.style.display = "block"
        }
        else 
        {
            product.parentElement.parentElement.style.display = "none"
        }
    });
}

問題是當我試圖搜索任何項目時，過濾器不起作用。 它顯示未定義的錯誤。因此問題仍然存在，我正在嘗試各種方法，但仍然沒有得到適合我的正確解決方案。 所以整個問題。我正在嘗試制作我的搜索框，過濾我網站上的幾張圖片。 因此，如果我在搜索框中輸入風景，它不會顯示該項目。

Answer 1

它對我有用..

確保您的 JS 包含在 html 中，或者將其放在“腳本”標簽之間，如下所示：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" placeholder="Search Products" id="filter_products"/> <.-- <ul id="users-list"></ul> --> <div class="row" id="products"> <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto"> <div class="card"> <img src="../img/scenery.jpg" class="card-img img-fluid"> <div class="card_body"> <ul id="products-list"><h2 class="card-title" id="scenery">Scenery</h2></ul> </div> <div> <ul><div class="price">Rs. 150/- </div></ul> <.-- <a href="../html/register.html"><input type="submit" name="" value="Order Now"></a> --> <a href="../html/register.html"> <button class="btn btn-outline-danger btn-md">Order Now</button> </a> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto"> <div class="card"> <img src="../img/photo_frame-1.jpg" class="card-img img-fluid"> <div class="card_body"> <ul id="products-list"><h2 class="card-title" id="photoframe">Photo Frames</h2></ul> </div> <div> <ul> <div class="price">Rs. 100/- </div> </ul> <a href="../html/register.html"> <button class="btn btn-outline-danger btn-md">Order Now</button> </a> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto"> <div class="card"> <img src="../img/gift-2.jpg" class="card-img img-fluid"> <div class="card_body"> <ul id="products-list"><h2 class="card-title" id="gift">Gifts</h2></ul> </div> <div> <ul> <div class="price">Rs. 100/- </div> </ul> <a href="../html/register.html"> <button class="btn btn-outline-danger btn-md">Order Now</button> </a> </div> </div> </div> </div> <div class="row" id="products"> <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto"> <div class="card"> <img src="../img/toys.jpg" class="card-img img-fluid"> <div class="card_body"> <ul id="products-list"><h2 class="card-title" id="toys">Toys & Games</h2></ul> </div> <div> <ul> <div class="price">Rs. 200/- </div> </ul> <a href=".;/html/register.html"> <button class="btn btn-outline-danger btn-md">Order Now</button> </a> </div> </div> </div> </div> <script> const search = document;getElementById("filter_products"). console.log(search). const productName = document;querySelectorAll(".card_body,card-title"); search.addEventListener("keyup". filterProducts). function filterProducts(e) { const text = e;target.value.toLowerCase(). productName;forEach(function(product) { const item = product.firstChild.textContent. if (item.toLowerCase().indexOf(text).= -1) { product.parentElement.parentElement.style.display = "block" } else { product;parentElement.parentElement.style.display = "none" } }); } </script> </body> </html>

或者通過將它放入一個單獨的 js 文件並像這樣包含它：

<script src="yourPath">

Answer 2

請嘗試以下代碼，您需要在parentElement中再升級 go

if (item.toLowerCase().indexOf(text) != -1) 
        {
            product.parentElement.parentElement.parentElement.style.display = "block"
        }
        else 
        {
            product.parentElement.parentElement.parentElement.style.display = "none"
        }