如何实现隐藏Product-list，仅通过搜索栏搜索时显示结果？

需要实现初始状态下隐藏product-list容器，仅当用户通过搜索栏执行搜索操作时，才显示匹配的产品结果。现有相关实现代码如下：

原代码 #

JavaScript #

function search() {
  var searchBar, ProductsList, Products, ProductsTitle, TextValue, Element

  searchBar = document.getElementById('searchBar').value.toUpperCase()
  ProductsList = document.getElementById('product-list')
  Products = document.querySelectorAll('.product')
  ProductsTitle = ProductsList.getElementsByTagName('h2')

  for (let i = 0; i < ProductsTitle.length; i++) {
    TextValue = Products[i].getElementsByTagName('h2')[0];
    if (TextValue) {
      Element = TextValue.textContent || e.innerHTML
      if (Element.toUpperCase().indexOf(searchBar) > -1) {
        Products[i].style.display = ""
      } else {
        Products[i].style.display = "none"
      }
    }
  }
}

CSS #

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

.products {
  padding: 10px;
  width: 100%;
  display: flex;
  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;
}

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>

修改后的实现方案 #

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

给.products类添加display: none;，让列表初始状态不可见：

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

2. JavaScript修改：优化搜索逻辑 #

修复变量错误，并添加列表显示/隐藏的控制逻辑：

function search() {
  const searchBar = document.getElementById('searchBar').value.trim().toUpperCase()
  const ProductsList = document.getElementById('product-list')
  const Products = document.querySelectorAll('.product')

  // 搜索框为空时，隐藏整个列表
  if (!searchBar) {
    ProductsList.style.display = 'none'
    return
  }

  // 搜索框有内容时，先显示列表再筛选
  ProductsList.style.display = 'flex'

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

3. HTML修改：绑定搜索按钮点击事件 #

给搜索按钮添加onclick事件，确保点击按钮也能触发搜索：

<div class="search">
  <input id="searchBar" type="text" placeholder="Search" onkeyup="search()">
  <button type="submit" onclick="search()">search</button>
</div>

完整修改后代码 #

最终JavaScript #

function search() {
  const searchBar = document.getElementById('searchBar').value.trim().toUpperCase()
  const ProductsList = document.getElementById('product-list')
  const Products = document.querySelectorAll('.product')

  if (!searchBar) {
    ProductsList.style.display = 'none'
    return
  }

  ProductsList.style.display = 'flex'

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

最终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;
}

最终HTML #

<div class="search">
  <input id="searchBar" type="text" placeholder="Search" onkeyup="search()">
  <button type="submit" onclick="search()">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>

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