Show search results only when searching

Question

How can I hide the list of products, and show the results only when searching using the search bar?

Every time I hide the list of products, when I search the entire list appears and not only the search result.

I want to show only the search result when searching using 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;
}


  
  




  


  
    
    
      Mango
      1.50€
    
  
  
    
    
      pomegranate
      1.50€
    
  
  
    
    
      Grape
      1.50€
    
  
  
    
    
      apple
      1.50€
    
  
  
    
    
      fig
      1.50€

user_3448527 · Answer

You can use classList in parent .products

searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')

When class is active the wrapper as display:flex

Note: I improved a bit your code

const searchBar = document.getElementById('searchBar')

function search() {

  const searchBarValue = document.getElementById('searchBar').value.toUpperCase()
  const productsList = document.getElementById('product-list')
  const products = document.querySelectorAll('.product')
  const productsTitle = productsList.getElementsByTagName('h2')

  searchBarValue.length ? productsList.classList.add('active') : productsList.classList.remove('active')

  for (let i = 0; i < productsTitle.length; i++) {
    const textValue = products[i].getElementsByTagName('h2')[0];
    if (textValue) {
      const element = textValue.textContent.toUpperCase()
      products[i].style.display = element.indexOf(searchBarValue) > -1 ? "" : "none"
    }
  }
}

searchBar.addEventListener('keyup', search)

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

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

.products.active {
  display: flex;
  flex-direction: column;
}

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


  
  




  


  
    
    
      Mango
      1.50€
    
  
  
    
    
      pomegranate
      1.50€
    
  
  
    
    
      Grape
      1.50€
    
  
  
    
    
      apple
      1.50€
    
  
  
    
    
      fig
      1.50€

Show search results only when searching

1 Answers