implementing-search-filter

Create a custom useDebounce hook with useEffect and setTimeout, applying a 300ms delay to the input value before triggering the search. Cancel pending requests on new input and show loading states during fetch.

Use a query builder pattern that chains filter methods for text search with ilike, exact match filters, range filters, and sorting. Add GIN indexes on tsvector columns for PostgreSQL full-text search performance.

Downshift provides headless, WAI-ARIA compliant autocomplete primitives for full styling control, while React Select offers a full-featured component with built-in async search and multi-select. Choose Downshift for custom UIs.

Use client-side filtering for datasets under 1000 items where results update instantly in memory. Use server-side search for larger datasets with API endpoints, database queries, pagination, and caching.

Sanitize search inputs by removing dangerous characters, validate column names against a whitelist, and use parameterized queries through the ORM. Also apply rate limiting and input length limits on search endpoints.

Use role="combobox" with aria-expanded and aria-controls on the input, role="listbox" on the suggestions list, and role="option" on items. Add an aria-live region to announce result counts to screen readers.