oziSearch

Version: 3.0.0 — Updated: 2026-05-27

Description

Real-time search, filtering and pagination plugin for web interfaces. Locates, highlights and organizes elements in the DOM as the user types, without page reload. Supports any HTML structure — simple lists, complex cards, hierarchical menus and body text.

Incorporates declarative pagination — transforms any list of elements into navigable pages with automatic ellipsis, without relying on <table> or DataTables.

Examples

[1] Simple search

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

<div class="search-simple">Alabama</div>
<div class="search-simple">Alaska</div>
<div class="search-simple">Arizona</div>

[2] Multi-word search with highlight

Multiple simultaneous words with highlight of found terms.

<input type="text" class="form-control"
       data-ozi-search="items"
       data-ozi-search-multi="true"
       data-ozi-search-highlight="true"
       placeholder="Search with multiple words...">

[3] Highlight in body text — without filtering

Highlights found terms without hiding content. Ideal for searching texts and articles.

<input type="text" class="form-control"
       data-ozi-search="content"
       data-ozi-search-multi="true"
       data-ozi-search-highlight="bg-warning text-dark fw-bold"
       data-ozi-search-no-filter="true"
       placeholder="Type to highlight...">

<div class="content">
    <p>Article or content text...</p>
</div>

data-ozi-search-highlight accepts CSS classes — use any Bootstrap or custom class.

[4] Search in complex cards

Works in any HTML structure — doesn't need to be a simple list.

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

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

[5] Search with hierarchical groups

Automatically hides groups without visible items — ideal for side menus.

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

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

[6] Declarative pagination

Transforms any list into navigable pages. The <nav> is automatically injected inside the 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="Search...">

<div id="searchPagination">
    <div class="search-list">Item 1</div>
    <div class="search-list">Item 2</div>
    <div class="search-list">Item 3</div>
    <!-- pagination nav automatically injected here -->
</div>

• data-ozi-search-pagination="5" → 5 items per page
• data-ozi-search-pagination-id → container ID — required
• On filter → recalculates pages and returns to page 1
• Automatic ellipsis: ‹ 1 ... 4 5 6 ... 10 ›

Features

• Real-time search — no reload, immediate response
• Multiple words — each term filtered separately
• Configurable highlight — default or custom CSS class
• Highlight-only mode — highlights without hiding items
• Dynamic groups — hides groups without visible items
• Declarative pagination — any list becomes navigable pages
• Works in any HTML — lists, cards, menus, body text
• Event delegation — no need to reinitialize after dynamic renders

HTML Attributes

[1] Search Target

[2] Behavior

[3] Highlight

[4] Pagination

CSS Tokens

:root {
    /* Pagination */
    --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;
}

Removed in v2.0.0