Search Inputs (Data Tables)

How It Works

When the user types, the search dispatches an ms:search event to the target list container. The card view, table view and Kanban view list scripts listen for this event, filter their full in-memory record cache, recalculate pagination, and re-render.

Where do results appear? In the existing list/table/board you already have on the page. The search input never duplicates the data it just narrows what's shown. The "no results" message and result count appear inside the search wrapper itself.

Setup

This component requires an accompanying script. Drop the search wrapper anywhere on the page, point it at your list, and you're done.

• ms-code-target — CSS selector for the list container(s) to filter (default: [data-ms-code='list-container']). Use [data-ms-code='kanban-container'] for kanban boards. Match multiple lists by separating selectors with commas
• ms-code-search-fields — (optional) comma-separated list of data-ms-field keys to search within (e.g. task,notes,priority). Leave empty to search every field on each record
• ms-code-row-selector — (optional, fallback only) explicit CSS selector for rows when a list doesn't listen for ms:search. Auto-detected for built-in components
• ms-code-debounce — milliseconds to wait after typing stops before filtering (default: 200)
• ms-code-min-chars — minimum characters required before filtering kicks in (default: 1)

Pairing with the Card List View

The default ms-code-target already matches the list container. Place the search wrapper anywhere on the page — typically above the list. The search will filter across all records loaded by the list (up to its MAX_RECORDS ceiling), regardless of pagination.

Pairing with the Table List View

Same as card list view — the default target works. If you have multiple tables on the page (e.g. "All Todos" and "My Todos"), give each one a unique selector and pair each with its own search input:

<!-- Search for the "All Todos" table only -->
<div data-ms-code="search" ms-code-target="#all-todos">...</div>
<div id="all-todos" data-ms-code="list-container" ms-code-table="todos">...</div>

<!-- Search for the "My Todos" table only -->
<div data-ms-code="search" ms-code-target="#my-todos">...</div>
<div id="my-todos" data-ms-code="list-container" ms-code-table="todos" ms-code-owner-field="owner">...</div>

Pairing with the Kanban Board

Change ms-code-target to point at the kanban container:

<div data-ms-code="search"
ms-code-target="[data-ms-code='kanban-container']"
ms-code-search-fields="task,notes">
...
</div>

Cards that don't match are hidden across all columns. Empty columns simply appear empty, the kanban's column-count badges keep showing the unfiltered totals on purpose so users understand they're filtering, not deleting.

Key Features

• Filters across all paginated records, not just the current page — works at the data level via the ms:search event
• Live result count using a customizable template ({visible} of {total} results)
• Pagination automatically recalculates based on filtered results — page 1 of 5 might become page 1 of 2 when filtering narrows the dataset
• Pure client-side filtering — no extra API calls, no rate-limit impact, instant results
• Optional field allow-list — search only specific fields like task and notes, ignoring priority or status
• Debounced input prevents lag while typing on long lists
• "No results" state shown when nothing matches
• Clear button appears as soon as the input has text
• Press Escape to clear the search and restore all rows
• Multiple search inputs per page — each one targets its own list independently

Custom Lists

If you have a custom list component, the search input falls back to client-side DOM filtering automatically. To make a custom list participate in data-level filtering, have it listen for ms:search on its container element:

container.addEventListener('ms:search', function(e) {
e.preventDefault(); // tell the search input you'll handle it
var query = (e.detail.query || '').toLowerCase();
var fields = e.detail.fields || [];
// Filter your records and re-render here
// Then optionally dispatch ms:search:result back so the count UI updates:
container.dispatchEvent(new CustomEvent('ms:search:result', {
detail: { visible: filtered.length, total: all.length, query: query }
}));
});

Potential Use Cases

• Any Memberstack-powered site with list, table, or board views that benefit from quick-find
• Task lists, customer directories, project catalogs, content libraries, hiring pipelines, order histories, inventory, and more
• Drop in next to any existing list component — no markup changes needed in the list itself for the built-in components