---
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.