如何隐藏产品列表，仅在使用搜索栏搜索时显示匹配结果？

问题根源 #

• 产品列表默认处于显示状态，未实现初始隐藏
• JS代码中存在未定义变量e，导致部分逻辑异常
• 未处理搜索框清空时的列表隐藏逻辑

修改步骤及代码 #

1. CSS修改：默认隐藏产品列表 #

给.products添加默认隐藏属性，确保页面加载时列表不显示：

.products {
  padding: 10px;
  width: 100%;
  display: none; /* 新增：默认隐藏列表 */
  flex-direction: column;
  position: absolute;
  top: 50px;
  z-index: 2;
}

同时修正一个CSS选择器错误：原.product text应为.product .text（HTML中是<div class="text">，不是标签）

.product .text {
  float: left;
}

2. JS逻辑修复与优化 #

修复未定义变量问题，添加搜索框为空时的隐藏逻辑，同时简化遍历逻辑：

function search() {
  const searchBarValue = document.getElementById('searchBar').value.trim().toUpperCase();
  const productsList = document.getElementById('product-list');
  const products = document.querySelectorAll('.product');

  // 搜索框为空时，隐藏整个产品列表
  if (searchBarValue === '') {
    productsList.style.display = 'none';
    return;
  }

  // 有搜索内容时，先显示列表容器
  productsList.style.display = 'flex';

  // 遍历产品，匹配搜索关键词
  products.forEach(product => {
    const title = product.querySelector('h2').textContent.toUpperCase();
    product.style.display = title.includes(searchBarValue) ? 'flex' : 'none';
  });
}

3. 完整代码整合 #

HTML（无需修改）

<div class="search">
  <input id="searchBar" type="text" placeholder="Search" onkeyup="search()">
  <button type="submit">search</button>
</div>
<div class="search-result">
</div>
<div class="img">
  <img src="https://www.sare.org/wp-content/uploads/Our-Farms-Our-Future-Podcast-Logo-330x166.jpg" style="width: 100%;" alt="">
</div>
<div class="products" id="product-list">
  <div class="product">
    <img src="images/img/2.png" alt="" style="width:150px;">
    <div class="text">
      <h2>Mango</h2>
      <h4>1.50€</h4>
    </div>
  </div>
  <div class="product">
    <img src="images/img/3.png" alt="" style="width:150px;">
    <div class="text">
      <h2>pomegranate</h2>
      <h4>1.50€</h4>
    </div>
  </div>
  <div class="product">
    <img src="images/img/4.png" alt="" style="width:150px;">
    <div class="text">
      <h2>Grape</h2>
      <h4>1.50€</h4>
    </div>
  </div>
  <div class="product">
    <img src="images/img/5.png" alt="" style="width:150px;">
    <div class="text">
      <h2>apple</h2>
      <h4>1.50€</h4>
    </div>
  </div>
  <div class="product">
    <img src="images/img/6.png" alt="" style="width:150px;">
    <div class="text">
      <h2>fig</h2>
      <h4>1.50€</h4>
    </div>
  </div>
</div>

CSS（修改后）

.search-result {
  max-width: max-content;
  background-color: rgba(0, 0, 0, 0.6);
  height: max-content;
}

.products {
  padding: 10px;
  width: 100%;
  display: none;
  flex-direction: column;
  position: absolute;
  top: 50px;
  z-index: 2;
}

.product {
  float: right;
  display: flex;
  align-items: center;
  direction: rtl;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  border-bottom: 2px solid red;
}

.product .text {
  float: left;
}

* {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.search {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.search input {
  border-radius: 20px 0px 0px 20px;
  outline: none;
  width: 250px;
  border-color: red;
  padding-left: 20px;
}

.search button {
  border-radius: 0px 20px 20px 0px;
  padding: 5px 20px;
  background-color: red;
  color: white;
  font-size: 1.2rem;
  border-color: red;
  cursor: pointer;
  outline: none;
  border: none;
}

JS（修改后）

function search() {
  const searchBarValue = document.getElementById('searchBar').value.trim().toUpperCase();
  const productsList = document.getElementById('product-list');
  const products = document.querySelectorAll('.product');

  if (searchBarValue === '') {
    productsList.style.display = 'none';
    return;
  }

  productsList.style.display = 'flex';

  products.forEach(product => {
    const title = product.querySelector('h2').textContent.toUpperCase();
    product.style.display = title.includes(searchBarValue) ? 'flex' : 'none';
  });
}

关键说明 #

• 初始隐藏：通过CSSdisplay: none实现列表默认不显示
• 空值处理：搜索框清空时自动隐藏列表，避免残留显示
• 逻辑简化：用forEach替代for循环，代码更简洁易读
• 错误修复：解决原代码中未定义变量e的问题

内容的提问来源于stack exchange，提问作者hasab