v0 prompt to add a search feature
Paste this into an existing v0 project and it adds a keyboard-driven search: debounced input, request cancellation, highlighted matches, and URL-synced queries you can share. The spec pins all four result states, including the pre-query hint and the no-results echo, which are the two it skips when left to guess.
Last updated
Add search for {{resource}} to the current generation.
Placement: a search input in the top bar, focusable with the / key, plus Cmd+K (Ctrl+K on Windows) opening the same search as a command-palette style overlay.
Query behavior: debounce keystrokes by 300ms, trim whitespace, ignore queries under 2 characters, and cancel any in-flight request when a new one starts so stale responses can never overwrite fresh results. Match against name and description, case-insensitive.
Where filtering happens: server-side, in a GET /api/search?q= route handler reusing the existing data layer. If this generation only has client-side mocked data, filter the mock array through the same function signature so swapping to a real endpoint later changes one file.
Result states, all four: before any query, a hint with two example searches; while fetching, a compact skeleton list; results as rows showing name, status, and updated time with the matching substring highlighted; no results, echo the query, as in "Nothing for 'foo'", with a clear button.
URL sync: write the query to ?q= so results are shareable and the back button restores the previous search. Landing on a URL that already has ?q= runs the search immediately.
Keyboard: arrow keys move the highlight through results, Enter opens the selected item, Escape clears and closes the overlay. The highlighted row scrolls into view when it moves off screen.
Do not restyle anything outside the search components, and finish by listing the files you touched.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Add search for users to the current generation. Placement: a search input in the top bar, focusable with the / key, plus Cmd+K (Ctrl+K on Windows) opening the same search as a command-palette style overlay. Query behavior: debounce keystrokes by 300ms, trim whitespace, ignore queries under 2 characters, and cancel any in-flight request when a new one starts so stale responses can never overwrite fresh results. Match against name and description, case-insensitive. Where filtering happens: server-side, in a GET /api/search?q= route handler reusing the existing data layer. If this generation only has client-side mocked data, filter the mock array through the same function signature so swapping to a real endpoint later changes one file. Result states, all four: before any query, a hint with two example searches; while fetching, a compact skeleton list; results as rows showing name, status, and updated time with the matching substring highlighted; no results, echo the query, as in "Nothing for 'foo'", with a clear button. URL sync: write the query to ?q= so results are shareable and the back button restores the previous search. Landing on a URL that already has ?q= runs the search immediately. Keyboard: arrow keys move the highlight through results, Enter opens the selected item, Escape clears and closes the overlay. The highlighted row scrolls into view when it moves off screen. Do not restyle anything outside the search components, and finish by listing the files you touched.
Same task in other tools
Questions about this prompt
Should filtering be client-side or server-side?
The prompt defaults to a route handler so behavior survives real data volumes. For a small mocked list, tell v0 to "filter client-side but keep the same function signature and states", and you can move it server-side later without touching the UI.
Fast typing shows results for an old query. Why?
The cancellation requirement got skipped, which happens when v0 reaches for a bare useEffect fetch. Ask it to wire an AbortController that cancels the previous request on each keystroke, then confirm by typing quickly with network throttling turned on.
How do I grow this into a full command palette?
Ask v0 to extend the Cmd+K overlay with action entries, navigation and create actions, grouped under headings alongside search results. The shadcn Command component handles grouping; mention it by name so v0 builds on it instead of a custom list.