精选最新
搜索栏Hero Search with Suggestions
A large hero search field with a live combobox suggestion list driven by the keyboard.
#search#combobox#autocomplete
3 个框架中级
Loading…
A search field that drops down recent searches on focus, each removable individually.
<!-- Recent searches show on focus while the field is empty. Each row has its
own remove button, so clearing one entry never nukes the whole history. -->
<div class="relative mx-auto w-full max-w-md">
<label class="sr-only" for="recent-search">Search</label>
<input id="recent-search" type="search" placeholder="Search…" autocomplete="off" aria-expanded="true" aria-controls="recent-list" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
<div id="recent-list" class="absolute z-10 mt-2 w-full overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-800 dark:bg-gray-900">
<p class="px-3 pt-2 text-[0.6875rem] font-semibold uppercase tracking-wide text-gray-400">Recent</p>
<ul class="py-1">
<li class="flex items-center">
<button type="button" class="flex flex-1 items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800">
<svg class="h-3.5 w-3.5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="10" cy="10" r="7" /><path d="M10 6v4l3 2" stroke-linecap="round" /></svg>
annual report
</button>
<button type="button" aria-label="Remove annual report" class="px-3 py-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"><svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15" stroke-linecap="round" /></svg></button>
</li>
</ul>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
initialRecent | string[] | [] | Initial recent |
placeholder | string | 'Search…' | Placeholder |
onSearch | (value: string) => void | - | On search |
className | string | - | 合并到根元素上的额外类名。 |
Recent searches show only when the field is focused and empty; submitting de-dupes to the front and caps the list at five. Rows use `onMouseDown` with `preventDefault` so the tap registers before the blur closes the panel, and each has its own remove button.