DropSearchJS - Uma Biblioteca JS Leve, Para Inserir Busca Dinâmica em Qualquer Site

Quem nunca precisou implementar um filtro ou campo de busca em uma lista de produtos, usuários ou qualquer outro elemento e se viu pensando: "Preciso mesmo usar banco de dados ou bibliotecas mais complexas só pra isso?".

Pensando em resolver esse problema, desenvolvi o DropSearchJS: uma biblioteca de JavaScript puro e super leve que adiciona funcionalidade de busca dinâmica em qualquer página web. A ideia é simples: você só precisa adicionar alguns atributos no seu HTML.

✨ Por que usar o DropSearchJS?

• Zero Dependências: É JavaScript puro. Sem jQuery, sem React, sem nada. Leve e rápido.
• Configuração em 1 Minuto: Adicione um atributo no seu input e outro nos itens que quer filtrar. Pronto.
• Filtro em Tempo Real: A lista é atualizada enquanto o usuário digita.
• Suporte a Tags: Permite buscas mais precisas com filtros por tags personalizadas.
• Múltiplos Filtros na Mesma Página: Você pode ter vários campos de busca independentes funcionando ao mesmo tempo.

🚀 Mão na Massa: Como usar em 3 passos

Vamos ver como é ridiculamente fácil de configurar.

Passo 1: Adicione o script na sua página

Primeiro, baixe o arquivo dropsearch.js do repositório no GitHub e inclua no seu HTML.

<script src="path/to/dropsearch.js"></script>

Passo 2: Defina o seu campo de busca

No seu elemento <input>, adicione o atributo dropsearch-input com um ID único para o seu grupo de busca. Exemplo:

<input type="text" dropsearch-input="produtos" placeholder="Buscar produtos...">

Passo 3: Marque os itens a serem filtrados

Nos elementos que você quer que sejam filtráveis (divs, li, etc.), adicione o atributo dropsearch com o mesmo ID que você usou no input.

<div class="lista-produtos">
  <div dropsearch="produtos">Smartphone XYZ</div>
  <div dropsearch="produtos">Notebook Pro</div>
  <div dropsearch="produtos">Fone de Ouvido Sem Fio</div>
  <div dropsearch="produtos">Teclado Mecânico</div>
</div>

E é isso! A biblioteca inicializa sozinha e seu filtro já está funcionando.

💡 Indo Além: Recursos Avançados

O básico já resolve 90% dos casos, mas o DropSearchJS tem alguns truques na manga.

Filtrando por Tags

Para buscas mais específicas, você pode adicionar tags aos seus itens. A busca vai considerar tanto o texto do elemento quanto as tags.

<div dropsearch="produtos" dropsearch-tags="eletronicos,celular">Smartphone XYZ</div>
<div dropsearch="produtos" dropsearch-tags="informatica,computador">Notebook Pro</div>
<div dropsearch="produtos" dropsearch-tags="audio,acessorios">Fone de Ouvido Sem Fio</div>

Agora, se o usuário digitar "celular", o "Smartphone XYZ" vai aparecer.

Exibindo uma mensagem de "Nenhum resultado"

Por padrão, a biblioteca apenas esconde os itens que não correspondem à busca. Se você quiser mostrar uma mensagem quando nada for encontrado, pode usar um pequeno script complementar:

<div id="lista-produtos">
  <div dropsearch="produtos">Produto A</div>
  <div dropsearch="produtos">Produto B</div>
</div>

<div id="sem-resultados" style="display: none;">
  Ops! Nenhum produto encontrado.
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const campoBusca = document.querySelector('[dropsearch-input="produtos"]');
    const semResultados = document.getElementById('sem-resultados');
    
    campoBusca.addEventListener('input', () => {
      // Pequeno delay para esperar o filtro do DropSearchJS rodar
      setTimeout(() => {
        const itensVisiveis = document.querySelectorAll('[dropsearch="produtos"]:not([style*="display: none"])');
        semResultados.style.display = itensVisiveis.length === 0 ? 'block' : 'none';
      }, 100);
    });
  });
</script>

O objetivo do DropSearchJS é ser uma ferramenta "plug-and-play" para uma necessidade muito comum. Sem build, sem dependências, só JavaScript puro e HTML semântico.

O projeto é open source e está no começo (Ver. 0.9). Se curtiu a ideia, dá uma força lá no GitHub com uma estrela!

Repositório no GitHub: https://github.com/gmasson/dropsearchjs