Aí está.
A lógica é simples: a cada vez que uma tecla é pressionada dentro do input
, o código Javascript gera uma expressão regular com o valor do input
, expressão essa que é comparada ao texto de cada item da lista. Os items cujo texto não corresponde à ela recebem display: none;
em seu css, para que fiquem ocultos. Já os que correspondem, ficam com display: block;
Obs: o script só funciona para encontrar items que COMEÇAM com o que foi digitado. "Maçã verde", por exemplo, não seria encontrada apenas digitando a palavra "verde".
const campoPesquisa = document.querySelector('#pesquisa');
const items = document.querySelectorAll('#lista li');
let regexCheck;
campoPesquisa.addEventListener('keyup', function(e) {
regexCheck = new RegExp(`^${e.target.value}`, 'i');
items.forEach(item => {
if (!item.innerText.match(regexCheck)) {
item.style.display = 'none';
} else {
item.style.display = 'block';
}
});
});
#lista {
list-style: none;
}
<input type="text" id="pesquisa" placeholder="Pesquise aqui">
<ul id="lista">
<li>Abacate</li>
<li>Banana</li>
<li>Cenoura</li>
<li>Tomate</li>
</ul>