Search Page
搜索页
Aliases:搜索结果页搜索页面搜东西的页面全站搜索查询结果页搜索列表页搜一搜
What is it
A content-discovery page answering a query: a persistent search box on top (keeping the term, editable to re-search), type and facet filters on one side, and results ranked by relevance in the body (title + snippet + highlighted hits), continued by pagination or infinite scroll. Empty state and no-results state must be designed explicitly.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Large content bases located by keywords
- Results need type, time or tag filtering
- Matching must be transparent — highlights and counts
✕ When not to use
- Tiny content bases where browsing suffices
- Precise structured queries — filters or tables are direct
- Command-style quick actions — a command palette is lighter
Variants
Results List
列表结果
Title + snippet rows, the classic search engine
Grid Results
网格结果
Card grid for images or products
Instant Search
即时搜索
Results while typing, no Enter needed
Faceted Search
多面筛选
Facets left + results right, common in commerce and docs
Page structure
- 01
Search box
The page entry point, keeping the last query and supporting suggestions.
- 02
Filter panel
Category, scope and sort — collapsible or a persistent sidebar.
- 03
Results
Shows hit count and timing; guides instead of a blank when empty.
- 04
Result item
Clickable title, snippet with highlighted terms, source and time.
- 05
Pagination
Paging or infinite scroll, preserving filters and scroll position.
Implementation
gridflexscroll-behavior: smoothtext-wrap: balanceKeep the box persistent with the term preserved (controlled input); instant search uses debounce (250–400ms) plus AbortController to cancel stale requests. Highlight hits with a distinct <mark> style. Sync filters to URL query params (shareable, back-button friendly). Empty input gets a guide state; no results get alternate suggestions and popular content.
Related concepts
A floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.
ComponentsContainsA panel concentrating filter controls beside the list (or revealed in a drawer or popover): checkbox groups, radios and sliders compose the current query. It syncs with the list to refresh result counts, echoes selected conditions and offers clear-all.
ComponentsContainsNarrows a large list to whatever matches the current input: every keystroke filters the list in place, with hit counts and an empty-state hint. Finding becomes pruning — no submit, no page jump, feedback stays right in front of the user.
PatternsUses patternA page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsContainsWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsUses pattern