Maofeng
59 lines
1.4 KiB
Plaintext
59 lines
1.4 KiB
Plaintext
---
|
|
title: Global search example
|
|
description: Compose a trigger, dialog, recent searches, and result navigation.
|
|
order: 30
|
|
toc:
|
|
- id: define-results
|
|
title: Define results
|
|
- id: handle-selection
|
|
title: Handle selection
|
|
- id: control-history
|
|
title: Control history
|
|
---
|
|
|
|
## Define results {#define-results}
|
|
|
|
```ts
|
|
const searchAdapter: SearchAdapter = {
|
|
async search({ query }) {
|
|
return {
|
|
groups: [
|
|
{
|
|
id: "docs",
|
|
label: "Documentation",
|
|
items: documents
|
|
.filter((document) => document.title.includes(query))
|
|
.map((document) => ({
|
|
id: document.slug,
|
|
title: document.title,
|
|
description: document.description,
|
|
payload: { href: `/docs/${document.slug}` },
|
|
})),
|
|
},
|
|
],
|
|
}
|
|
},
|
|
}
|
|
```
|
|
|
|
## Handle selection {#handle-selection}
|
|
|
|
```tsx
|
|
<SearchProvider
|
|
adapter={searchAdapter}
|
|
onSelect={({ item }) => {
|
|
const payload = item.payload as { href: string }
|
|
router.navigate({ to: payload.href })
|
|
}}
|
|
>
|
|
<HeaderSearchButton />
|
|
<SearchDialog />
|
|
</SearchProvider>
|
|
```
|
|
|
|
Code that cannot render `SearchTrigger` can call `searchDialogHandle.open(null)`.
|
|
|
|
## Control history {#control-history}
|
|
|
|
Recent searches use `workspace-search-history` by default. Supply a product-specific `historyStorageKey`, or set it to `false` to keep history in memory for the current session only.
|