Javascript 根据图像名称的搜索输入过滤数据

这是我的HTML代码

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

150卢比/-
相框

100卢比/-

礼品

100卢比/-

玩具和游戏

200卢比/-

这是我的Javascript代码片段，它有问题。
const search=document.getElementById（“过滤器产品”）；
控制台日志（搜索）；
const productName=document.querySelectorAll（“.card\u body.card title”）；
search.addEventListener（“键控”，filterProducts）；
函数过滤器产品（e）
{
const text=e.target.value.toLowerCase（）；
productName.forEach（功能（产品）
{
const item=product.firstChild.textContent；
if（item.toLowerCase（）.indexOf（text）！=-1）
{
product.parentElement.parentElement.style.display=“block”
}
其他的
{
product.parentElement.parentElement.style.display=“无”
}
});
}

问题是，当我试图搜索任何项目时，过滤器不起作用。它显示了未定义的错误。因此，问题一直存在，我尝试了各种方法，但仍然没有找到适合我的正确解决方案。所以，这就是整个问题。我正试图使我的搜索框，通过我的网站上的几个图像过滤。因此，如果我在搜索框中输入布景，它不会显示该项目。

它对我有效

确保您的JS包含在html中，或者将其放在“脚本”标记之间，如下所示：

文件

150卢比/-
相框

100卢比/-

礼品

100卢比/-

玩具和游戏

200卢比/-

const search=document.getElementById（“过滤器产品”）；
控制台日志（搜索）；
const productName=document.querySelectorAll（“.card\u body.card title”）；
search.addEventListener（“键控”，filterProducts）；
函数过滤器产品（e）
{
const text=e.target.value.toLowerCase（）；
productName.forEach（功能（产品）
{
const item=product.firstChild.textContent；
if（item.toLowerCase（）.indexOf（text）！=-1）
{
product.parentElement.parentElement.style.display=“block”
}
其他的
{
product.parentElement.parentElement.style.display=“无”
}
});
}

请尝试下面的代码，您需要在

parentElement

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

---

这对我有用。搜索特定项目时，其他项目不会隐藏。我希望只显示我搜索的产品项目。搜索特定项目时，其他项目不会隐藏。我希望只显示我搜索的产品项。

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