oziSearch

Versão: 2.0.0 — Atualizado em: 2026-04-26

Descrição

Plugin de busca, filtragem e paginação em tempo real para interfaces web. Localiza, destaca e organiza elementos no DOM a partir da digitação do usuário, sem necessidade de reload. Suporta qualquer estrutura HTML — listas simples, cards complexos, menus hierárquicos e textos corridos.

A partir da v2.0.0 incorpora paginação declarativa — transforma qualquer lista de elementos em páginas navegáveis com reticências automáticas, sem depender de <table> ou DataTables.

Exemplos

[1] Busca simples

<input type="text" class="form-control"
       data-ozi-search="search-simples"
       placeholder="Pesquisar...">

<div class="search-simples">Acre</div>
<div class="search-simples">Alagoas</div>
<div class="search-simples">Amapá</div>

[2] Busca dupla com destaque

M�ltiplas palavras simultâneas com highlight dos termos encontrados.

<input type="text" class="form-control"
       data-ozi-search="itens"
       data-ozi-search-multi="true"
       data-ozi-search-highlight="true"
       placeholder="Pesquise por múltiplas palavras...">

[3] Highlight em texto corrido — sem filtrar

Destaca os termos encontrados sem ocultar o conteúdo. Ideal para busca em textos e artigos.

<input type="text" class="form-control"
       data-ozi-search="conteudo"
       data-ozi-search-multi="true"
       data-ozi-search-highlight="bg-warning text-dark fw-bold"
       data-ozi-search-no-filter="true"
       placeholder="Digite para destacar...">

<div class="conteudo">
    <p>Texto do artigo ou conteúdo...</p>
</div>

data-ozi-search-highlight aceita classes CSS — use qualquer classe do Bootstrap ou própria.

[4] Busca em cards complexos

Funciona em qualquer estrutura HTML — não precisa ser lista simples.

<input type="text" class="form-control"
       data-ozi-search="search-list"
       data-ozi-search-highlight="bg-warning text-dark fw-bold"
       placeholder="Pesquisar...">

<div class="search-list">
    <strong>ID #1 | Super</strong>
    <span class="badge bg-primary">Super</span>
</div>
<div class="search-list">
    <strong>ID #2 | Distribuidor</strong>
    <span class="badge bg-success">Distribuidor</span>
</div>

[5] Busca com grupos hierárquicos

Oculta automaticamente grupos sem itens visíveis — ideal para menus laterais.

<input type="text" class="form-control"
       data-ozi-search="search-items"
       data-ozi-search-group="search-group"
       data-ozi-search-multi="true"
       placeholder="Pesquisar no menu...">

<li class="search-group">
    <span>Motos</span>
    <ul>
        <li class="search-items"><a>Honda</a></li>
        <li class="search-items"><a>Yamaha</a></li>
    </ul>
</li>
<li class="search-group">
    <span>Carros</span>
    <ul>
        <li class="search-items"><a>Ford</a></li>
        <li class="search-items"><a>Audi</a></li>
    </ul>
</li>

[6] Paginação declarativa

Transforma qualquer lista em páginas navegáveis. O <nav> é injetado automaticamente dentro do container.

<input type="text" class="form-control"
    data-ozi-search="search-list"
    data-ozi-search-highlight="bg-warning text-dark fw-bold"
    data-ozi-search-pagination="5"
    data-ozi-search-pagination-id="searchPagination"
    placeholder="Pesquisar...">

<div id="searchPagination">
    <div class="search-list">Item 1</div>
    <div class="search-list">Item 2</div>
    <div class="search-list">Item 3</div>
    <!-- nav de paginação injetado automaticamente aqui -->
</div>

• data-ozi-search-pagination="5" → 5 itens por página
• data-ozi-search-pagination-id → ID do container — obrigatório
• Ao filtrar → recalcula páginas e volta para página 1
• Reticências automáticas: ‹ 1 ... 4 5 6 ... 10 ›

Recursos

• Busca em tempo real — sem reload, resposta imediata
• Múltiplas palavras — cada termo filtrado separadamente
• Highlight configurável — classe CSS padrão ou customizada
• Modo somente highlight — destaca sem ocultar itens
• Grupos dinâmicos — oculta grupos sem itens visíveis
• Paginação declarativa — qualquer lista vira páginas navegáveis
• Funciona em qualquer HTML — listas, cards, menus, textos
• Delegação de eventos — não precisa reinicializar após renders dinâmicos

Atributos HTML

[1] Alvo da Busca

[2] Comportamento

[3] Highlight

[4] Paginação

Tokens CSS

:root {
    /* Paginação */
    --ozi-search-pagination-gap: 4px;
    --ozi-search-pagination-radius: 0.375rem;
    --ozi-search-pagination-height: 34px;
    --ozi-search-pagination-min-width: 34px;
    --ozi-search-pagination-font-size: 0.875rem;
    --ozi-search-pagination-color: #495057;
    --ozi-search-pagination-bg: #fff;
    --ozi-search-pagination-border: #dee2e6;
    --ozi-search-pagination-hover-bg: #f8f9fa;
    --ozi-search-pagination-active-bg: #0d6efd;
    --ozi-search-pagination-active-color: #fff;
    --ozi-search-pagination-disabled-color: #adb5bd;

    /* Highlight */
    --ozi-search-highlight-bg: #fff3cd;
    --ozi-search-highlight-color: #212529;
}

Removido na v2.0.0