@fexz/search-input v1.0.1

@fexz/search-input

Crie um sistema de busca dinâmico: conforme você digita no campo de pesquisa, as divs visíveis são filtradas automaticamente com base no texto digitado.

Instalação

npm install @fexz/search-input

Como Usar

No Navegador (ES Modules)

Adicione o input e as divs no seu HTML:

<input id="search-input" placeholder="Buscar..." />
<div class="search"><p>Primeira Div</p></div>
<div class="search"><p>Segunda Div</p></div>

Importe e execute a função no seu script:

import { searchBar } from '@fexz/search-input';

searchBar(); // Usa o input padrão com id "search-input" e as classes .folder, .search, .search-result

Em Bundlers Frontend (Webpack, Vite, etc.)

Basta importar e chamar a função no seu código principal:

import { searchBar } from '@fexz/search-input';

searchBar();

Parâmetros (caso personalize)

Se você adaptar a função para aceitar parâmetros, pode usá-la assim:

// Exemplo: searchBar('meu-input', 'minha-classe');
searchBar('meu-input', 'minha-classe');

Observações

• O campo de busca deve ter o id search-input (ou o id que você definir).
• As divs a serem filtradas devem ter as classes .folder, .search ou .search-result (ou a classe que você definir).
• O pacote é compatível com projetos ES Modules.

Atenção: Todas as divs a serem filtradas devem conter um elemento <p> dentro delas. Caso contrário, pode ocorrer erro ao tentar acessar o texto para comparação.

Licença

ISC

Contribua

Sugestões, melhorias ou correções? Abra uma issue ou pull request em https://github.com/felipeassisdev/SearchInput