JSFiddle - React, Tailwind, and code Playground

by PatrickHume

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

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

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