<input class="search-fruits" type="text">
<ul class="fruits-list">
  <li>Maçã</li>
  <li>Banana</li>
  <li>Pera</li>
  <li>Uva</li>
  <li>Mamão</li>
  <li>Manga</li>
  <li>Morango</li>
  <li>Abacaxi</li>
  <li>Kiwi</li>
  <li>Caju</li>
  <li>Framboesa</li>
</ul>
input{
  width: 200px;
  height: 30px;
}

ul{
  padding: 0px;
}

li{
  padding: 5px;
  margin: 0px;
  background: #d3d3d3;
  width: 200px;
  border: 1px solid white;
}
let inputElement = document.querySelector("input")
let listElement = document.querySelector("ul")
let itemElement = listElement.querySelectorAll("li")

inputElement.addEventListener("input", (e) => {
  let inputed = e.target.value.toLowerCase()
  itemElement.forEach((li) => {
    let text = li.textContent.toLowerCase()
    if(text.includes(inputed)){
      li.style.display = "block"
    }else{
      li.style.display = "none"
    }
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.