搜索不显示产品及如何显示

Question

第一次做搜索，知识匮乏请见谅。我正在尝试使用搜索来显示项目，但它没有显示任何产品。是由于 style.display 还是 json 产品的循环？我已尝试将 style.display 设置为“”和“阻止”，但没有任何显示。

js

const storeProducts = document.querySelectorAll('.shop-items');

        // SEARCH FILTER
        const search = document.getElementById("search");
        const productName = document.querySelectorAll(".shop-item");

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

ejs

<div class="search-box">
                <form action="" onsubmit="return false">
                    <input type="text" id="search" placeholder="Search Product">
                </form>
</div>
<div class="shop-items">
                    <% items.candy.forEach(function(item){ %>
                        <div class="shop-item" data-item-id="<%= item.id %>">
                            <span class="shop-item-title">
                                <%= item.name %>
                            </span>
                            <img class="shop-item-image" src="../assets/img/<%= item.imgName %>">
                            <div class="shop-item-details">
                                <span class="shop-item-price">$<%= item.price / 100 %></span>
                                <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                            </div>
                        </div>
                        <% }) %>
                </div>

json

{
    "candy": [
      {
        "id": 1,
        "name": "Bioderma",
        "price": 5000,
        "imgName": "product_01.png"
      },
      {
        "id": 2,
        "name": "Chanca Piedra",
        "price": 2300,
        "imgName": "product_02.png"
      },
      {
        "id": 3,
        "name": "Umcka",
        "price": 4000,
        "imgName": "product_03.png"
      }]
}

Answer 1

你犯的错误很少：

使用 firstElementChild 而不是 firstChild。因为 firstChild 不会 select span，而是 select span 和 div.
之间的文本节点
将显示 none 设置为产品本身而不是其祖父母。
同时删除使用 .trim() 方法得到的 textContent 中的空格。

请参阅下面的工作解决方案。 为简洁起见，我删除了 ejs。

const storeProducts = document.querySelectorAll('.shop-items');

// SEARCH FILTER
const search = document.getElementById("search");
const productName = document.querySelectorAll(".shop-item");

search.addEventListener("keyup", filterProducts);

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

<div class="search-box">
  <form action="" onsubmit="return false">
    <input type="text" id="search" placeholder="Search Product">
  </form>
</div>
<div class="shop-items">
  <div class="shop-item">
    <span class="shop-item-title">
      Bioderma
    </span>
  </div>
  <div class="shop-item">
    <span class="shop-item-title">
      Chanca Piedra
    </span>
  </div>
  <div class="shop-item">
    <span class="shop-item-title">
      Umcka
    </span>
  </div>
</div>

搜索不显示产品及如何显示

Search not displaying product and how to display

javascript

json

ejs