Como criar uma busca em uma lista HTML com Javascript puro?Como criar uma busca em uma lista HTML com Javascript puro?

Criando a lista no HTML

A lista criada para esse exercício, é no formato mais comum:

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

Repare que já colocamos um input do tipo texto para filtrar a nossa lista

Buscando os elementos com Javascript

Vamos buscar os elementos do nosso HTML e salvá-los em variáveis:

let inputElement = document.querySelector("input")
let listElement = document.querySelector("ul")
let itemElement = listElement.querySelectorAll("li")

Aqui, já temos o elemento onde o texto será digitado, a lista de elementos e cada elemento da lista.

Obs.: Nossa última variável está usando o "querySelectorAll", portanto, os elementos estão salvos dentro de um Array.

Criando o disparo do evento

Queremos que a lista seja atualizada toda vez que houver alguma alteração no "input".

Então, podemos usar esse trigger:

inputElement.addEventListener("input", (e) => {
  // Aqui irá executar em toda alteração no input
})

Lógica para busca

Agora que já temos o disparo criado, basta fazermos uma lógica que esconda todos os itens que não condizem com o que está sendo digitado.

Para isso, dentro do evento, vamos criar um loop passando por cada item da lista, assim:

inputElement.addEventListener("input", (e) => {
  itemElement.forEach((li) => {
    // Função executada para cada item da lista
  })
})

Repare que adicionamos o parametro "e" no evento, com esse objeto que pegaremos o que está sendo digitado, dessa forma:

let inputed = e.target.value.toLowerCase()

Nesse momento, já temos o valor digitado e uma função passando pelos elementos da lista.

Agora, temos que verificar se o texto digitado está incluso nos elementos, se sim, mantemos na lista, se não, podemos esconder.

Fica assim:

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

Pontos de atenção:

• Repare que usamos a função "toLowerCase()", tanto no texto digitado, quanto no texto da lista, isso para não termos problemas na comparação de letras minúsculas e maiúsculas.
• Usamos a função "includes" para verificar se o texto digitado está incluso no texto de cada item da lista.
• Então, usamos um if/else, para mostrar ou esconder os elementos, utilizando "element.style.display".

Resultado Final

Aqui, aplicamos um pouco de CSS para melhor visualização:

<iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/tavano/embed/poLYavo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/tavano/pen/poLYavo">
  Untitled</a> by Guilherme (<a href="https://codepen.io/tavano">@tavano</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>