Search Filtering
搜索筛选
Aliases:搜索筛选列表过滤即时搜索输入即搜关键字过滤筛选列表
What is it
Narrows 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.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Tens to hundreds of items that can be loaded once and filtered client-side
- Users recall part of a name or tag — scanning beats paging
- Lookup-heavy pages such as settings, contacts, component libraries
✕ When not to use
- Huge server-side datasets that require backend search
- Items with no obvious text or tag to match against
- Complex multi-facet conditions belong in a filter panel
Variants
Instant
即时过滤
Filter on every keystroke, no submit button
Filter chips
标签筛选
Category chips that stack with the query
Highlight
命中高亮
Highlights the matched fragment to justify each hit
Implementation
transitionmark:placeholder-shownbackground-colorA controlled input plus useMemo filtering (case-insensitive includes to start) over items rendered with subtle transitions. Show the hit count; render an empty state with a clear button on zero matches; highlight matched fragments with mark or accent color. Use type="search" with an aria-label; debounce only for remote requests. Respect prefers-reduced-motion.
Related concepts
A 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.
ComponentsUsed withA 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.
ComponentsUsed withA single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsUsed withWhen 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.
PatternsSimilarReplaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsSimilar