我一直在尝试为我的电子商务网站做一个搜索栏，让用户找到他们最喜欢的产品。
我不得不使用javascript来使搜索栏工作，但它仍然不工作，搜索栏出现，但它不能使用，每当你输入的东西，页面将仍然是相同的，没有改变和排序的关键字。
我的Javascript：

const search = () => {
    const searchbox = document.getElementById("search-item").value.toUpperCase();
    const storeitems = document.getElementById("game-list")
    const product = document.querySelectorAll("pro")
    const pname = storeitems.getElementsByTagName("h5")

    for (var i = 0; i < pname.length; i++) {
        let match = product[i].getElementsByTagName('h5')[0];

        if (match) {
            let textvalue = match.textContent || match.innerHTML

            if (textvalue.toUpperCase().indexOf(searchbox) > -1) {
                product[i].style.display = "";
            } else {
                product[i].style.display = "none";
            }
        }
    }
}

<form>
        <i class="fas fa-search"></i>
        <input type="text" name="" id="search-item" placeholder="Search here" onkeyup="search()">
 </form>

    <section id="product1" class="section-p1">
        <div class="pro-container" id="game-list">
            <div class="pro" onclick="window.location.href='sproduct.html'">
                <img src="img/products/f1.jpg" alt="">
                <div class="des">
                    <span>Developer : CD PROJEKT RED</span>
                    <h5>CYBERPUNK</h5>
                    <div class="star">
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-solid fa-star"></i>
                        <i class="fa-regular fa-star"></i>
                    </div>
                    <h4>$85</h4>
                </div>
                <a href="#"><i class="fa-regular fa-bookmark bookmark"></i></a>
            </div>