<div class="container">
  <h2>Advanced Search</h2>

  <input type="search" id="filter-input" placeholder="Enter a fruit name..." />

  <ul id="items-list">
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
    <li>Mango</li>
    <li>Strawberry</li>
    <li>Blueberry</li>
    <li>Pineapple</li>
    <li>Watermelon</li>
    <li>Grape</li>
    <li>Kiwi</li>
    <li>Peach</li>
    <li>Pear</li>
    <li>Cherry</li>
    <li>Plum</li>
    <li>Raspberry</li>
    <li>Blackberry</li>
    <li>Papaya</li>
    <li>Pomegranate</li>
    <li>Dragonfruit</li>
    <li>Guava</li>
  </ul>

  <p id="no-results">No results found</p>
</div>

body {
  font-family: system-ui, sans-serif;
  padding: 20px;
  text-align: -webkit-center;
  background-color: #f0f0f0;
}

div.container {
  max-width: 400px;
}

input#filter-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

ul#items-list {
  list-style: none;
  padding: 0;
}

ul#items-list li {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  border-radius: 3px;
  background-color: #757575;
  color: white;
}

p#no-results {
  display: none;
}

p#no-results.show {
  display: block;
}

const search = document.getElementById("filter-input");
const nothingFound = document.getElementById("no-results");
const items = document.querySelectorAll("ul#items-list li");

search.addEventListener("input", function () {
  const filterValue = this.value.toLowerCase();
  let count = 0;

  items.forEach(function (item) {
    if (item.textContent.toLowerCase().includes(filterValue)) {
      item.style.display = "";
      count++;
    } else {
      item.style.display = "none";
    }
  });

  if (count < 1) {
    nothingFound.classList.add("show");
  } else {
    nothingFound.classList.remove("show");
  }
});