oziSearch

Versión: 3.0.0 — Actualizado: 2026-05-27

Descripción

Plugin de búsqueda, filtrado y paginación en tiempo real para interfaces web. Localiza, resalta y organiza elementos en el DOM a partir de la escritura del usuario, sin necesidad de recarga. Soporta cualquier estructura HTML — listas simples, cards complejas, menús jerárquicos y textos continuos.

Incorpora paginación declarativa — transforma cualquier lista de elementos en páginas navegables con puntos suspensivos automáticos, sin depender de <table> ni DataTables.

Ejemplos

[1] Búsqueda simple

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

<div class="search-simple">Andalucía</div>
<div class="search-simple">Aragón</div>
<div class="search-simple">Asturias</div>

[2] Búsqueda múltiple con resaltado

Múltiples palabras simultáneas con highlight de los términos encontrados.

<input type="text" class="form-control"
       data-ozi-search="elementos"
       data-ozi-search-multi="true"
       data-ozi-search-highlight="true"
       placeholder="Busca con múltiples palabras...">

[3] Resaltado en texto continuo — sin filtrar

Resalta los términos encontrados sin ocultar el contenido. Ideal para búsqueda en textos y artículos.

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

<div class="contenido">
    <p>Texto del artículo o contenido...</p>
</div>

data-ozi-search-highlight acepta clases CSS — usa cualquier clase de Bootstrap o propia.

[4] Búsqueda en cards complejas

Funciona en cualquier estructura HTML — no necesita ser una lista simple.

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

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

[5] Búsqueda con grupos jerárquicos

Oculta automáticamente los grupos sin elementos visibles — ideal para menús laterales.

<input type="text" class="form-control"
       data-ozi-search="search-items"
       data-ozi-search-group="search-group"
       data-ozi-search-multi="true"
       placeholder="Buscar en el menú...">

<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>Coches</span>
    <ul>
        <li class="search-items"><a>Ford</a></li>
        <li class="search-items"><a>Audi</a></li>
    </ul>
</li>

[6] Paginación declarativa

Transforma cualquier lista en páginas navegables. El <nav> se inyecta automáticamente dentro del contenedor.

<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="Buscar...">

<div id="searchPagination">
    <div class="search-list">Elemento 1</div>
    <div class="search-list">Elemento 2</div>
    <div class="search-list">Elemento 3</div>
    <!-- nav de paginación inyectado automáticamente aquí -->
</div>

• data-ozi-search-pagination="5" → 5 elementos por página
• data-ozi-search-pagination-id → ID del contenedor — obligatorio
• Al filtrar → recalcula páginas y vuelve a la página 1
• Puntos suspensivos automáticos: ‹ 1 ... 4 5 6 ... 10 ›

Características

• Búsqueda en tiempo real — sin recarga, respuesta inmediata
• Múltiples palabras — cada término filtrado por separado
• Resaltado configurable — clase CSS por defecto o personalizada
• Modo solo resaltado — resalta sin ocultar elementos
• Grupos dinámicos — oculta grupos sin elementos visibles
• Paginación declarativa — cualquier lista se convierte en páginas navegables
• Funciona en cualquier HTML — listas, cards, menús, textos
• Delegación de eventos — no necesita reinicializar tras renders dinámicos

Atributos HTML

[1] Objetivo de Búsqueda

[2] Comportamiento

[3] Resaltado

[4] Paginación

Tokens CSS

:root {
    /* Paginación */
    --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;

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

Eliminado en v2.0.0