1

Então Pessoal, eu queria poder pesquisar items em html, sem um banco, pois os itens não serão acrescentados de forma dinâmica, já serão pré-estabelecidos, como sou iniciante não faço ideia de como fazer isso, se alguém puder me ajudar eu agradeço desde já.

ul{
list-style: none;
}
<input type="text" placeholder="Pesquise aqui">
<ul>
<li>Abacate</li>
<li>Banana</li>
<li>Cenoura</li>
<li>Tomate</li>
</ul>

1 Resposta 1

1

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .