| [ Web Proxy ] |
| Viewing: https://adminforth.dev/docs/tutorial/Plugins/universal-search/ | [Back] [Original] |
Deprecated: Prefer the Quick Filters plugin. It provides the same functionality and more.
Ephemeral, debounced multicolumn search for List pages. A lightweight input (injected at beforeActionButtons) sends the term with each list request; a hook expands it serverside into a single OR filter group over your configured columns. The term never enters the standard filter store, so:
Ideal for quick, multifield lookup without opening the filter panel.
pnpm add @adminforth/universal-search --save
Add the plugin to any resource. Place it inside the plugins array. It injects a component at the beforeActionButtons list page injection point (already available in AdminForth if you are on a recent version).
import UniversalSearchPlugin from '@adminforth/universal-search';
export const admin = new AdminForth({
...,
resources: [
{
resourceId: 'aparts',
table: 'apartments',
columns: [
{ name: 'id', primaryKey: true },
{ name: 'title' },
{ name: 'description' },
{ name: 'country' },
{ name: 'price' },
],
plugins: [
new UniversalSearchPlugin({
columns: [
{ name: 'title' },
{ name: 'description' },
{ name: 'country', caseSensitive: true },
{ name: 'price', exact: true },
],
debounceMs: 400, // optional (default 500)
placeholder: 'Search apartments' // optional (default empty string)
}),
]
}
]
});
Type into the input and (after debounce) the backend receives the term (as an internal field) and the plugin hook rewrites it into a single composite filter like this:
{
"operator": "or",
"subFilters": [
{ "field": "title", "operator": "ilike", "value": "%pent%" },
{ "field": "description", "operator": "ilike", "value": "%pent%" },
{ "field": "country", "operator": "like", "value": "%pent%" }
]
}
price (marked exact) will be compared for exact match (no wildcards). Numeric heuristics may be applied in future versions (current implementation sends the same OR group regardless of numeric content adjust logic in hook if you need number detection).
Press Enter to apply immediately without waiting for the debounce delay. Clearing the input removes the universal filter group entirely.
new UniversalSearchPlugin({
columns: [
{
name: string; // required column name
caseSensitive?: boolean; // default false
exact?: boolean; // exact match (no wildcards)
searchBy?: 'valueOnly' | 'keyOnly' | 'both' (reserved; not exposed yet in public docs)
}
],
debounceMs?: number; // default 500
placeholder?: string; // input placeholder (default "")
});
Notes:
_universal_search) and ephemeral behavior are fixed and not configurable.debounceMs).adminforth.__universalSearchTerm).__universal_search_term.beforeDatasourceRequest hook adds a temporary virtual filter.OR group across configured columns.This means the UI stays clean while the backend still receives a standard filter structure.
MIT
| Web Proxy Viewer | New URL | Original Page |