How can I hide the list

Question

How can the Product-list be hidden and search results appear only in the case of searching through the search bar?

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

.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;
}

<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>

Answer 1

I think this is what your after

https://jsfiddle.net/PatrickHume/dgk4ro57/11/

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')
  if (document.getElementById('searchBar').value.length > 0) {
    document.getElementById('product-list').style.display = ""
  } else {
    document.getElementById('product-list').style.display = "none"
  }

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

.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;
}

<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" style="display:none;">
  <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>

To fix I just added a display none to the HTML of product list, then added an if check to the code to see if the search had a value and hid or showed the listed based on if there was a search value entered

I hope this helps

Answer 2

Please check if this will solve it out for you and let me know if you have questions.

jQuery

$('#kwordslist').hide();

$("#searchBar").keyup(function() {
    var queryTerm = $(this).val();
if(queryTerm && queryTerm.length >= 1){
    $('#kwordslist').show();
}else{
    $('#kwordslist').hide();
}
});

OR / Pure Javascript

//Hide the list on load or do this useing CSS
var productList = document.getElementById("product-list");
productList.style.display = "none";

//Detect Change In the search input
var searchBar = document.getElementById("searchBar");
searchBar.onkeyup = function(){
if(searchBar.value && searchBar.value.length >= 1){
    productList.style.display = "block";
}else{
    productList.style.display = "none";
}
}