Search, Filters & Pagination Checklist

Interactive Search, Filters & Pagination Demo

Active filters:

Add filter:

...

Type to search with 300ms debounce. Add/remove filter chips. Navigate pages — Previous disabled on page 1, Next disabled on page 5.

1. Search

Search input is debounced — wait 300ms after the user stops typing before sending the request
Do NOT fire a search request on every keystroke
Loading indicator shown while search request is in progress
Previous results stay visible while new search is loading
Search is sent to the backend — never filtering a pre-loaded client-side array
Search input is parameterized — user input is passed as a query parameter, never interpolated into SQL or code
Minimum character count enforced if needed
Clear button appears inside the search input when it has a value
Clearing the input resets results to the unfiltered state
Search query preserved in URL param: ?search=query
Search preserved when navigating away and back
Search input has placeholder like: Search projects...
Autocomplete suggestions fetched from backend, debounced, keyboard-navigable
Autocomplete selection populates input and triggers search

2. Filters

Filters sent to backend — not applied to the current page's data only
Multiple filters combinable
Filters are additive by default — AND logic unless OR is explicitly designed
Active filters shown as removable chips/tags above or near the results
Each active filter chip has an X to remove that specific filter
Clear all filters button visible whenever any filter is active
Filter state preserved in URL params: ?status=active&assignee=me
Date range filters validate that end date is after start date
Dropdown filters show all possible values, not just values present in current results
Filter counts shown if useful
Loading state shown while filter request is processing
Filters reset to page 1 when changed
Filter panel/drawer uses Apply button or immediate apply consistently

3. Combining Search & Filters

Search and filters work together — both sent in the same request
Search + filter results match BOTH the search term AND all active filters
Changing a filter does not reset the search input
Changing the search does not reset the filters
URL contains both: ?search=marketing&status=active
Clear all resets both search and all filters simultaneously
Sort state is preserved when search or filters change
Page resets to 1 when search or filters change

4. Pagination

Total record count displayed: Showing 1–20 of 143 results
Per-page options available: 10, 25, 50, 100 or app-appropriate defaults
User's per-page preference saved
Previous button disabled on page 1
Next button disabled on last page
Page numbers shown for quick navigation
Current page highlighted
Pagination resets to page 1 when search, filter, or sort changes
Page number preserved in URL: ?page=3
Loading state between page changes
If total count unavailable, show Next only
Jump-to-page input for large datasets when useful

5. Infinite Scroll / Load More

Use this instead of pagination when the use case is browsing rather than precise navigation.

Load more button preferred over automatic infinite scroll
Load more button shows a spinner while loading next page
Load more button disabled while loading
No more results / end state shown when all data is loaded
Previously loaded items remain in the list
Scroll position preserved when navigating away and back
Error loading next page shown near Load more with retry option
First load uses skeleton items

6. URL State

Search, filter, sort, and page state must be in the URL so results are shareable and browser-back works.

Search: ?search=query
Filters: ?status=active&assignee=me&created_after=2024-01-01
Sort: ?sort=name&order=asc
Page: ?page=3
Per page: ?per_page=25
URL state read on page load
Shared URL reproduces same search/filter/sort/page
URL updated without full page reload
Back button restores previous filter/search state correctly

Before Marking Done

Search, filters, pagination, URL state, and empty states must all be tested together — not independently only.