> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sandboxes

> Explore Autocomplete code sandboxes.

<Tip>
  Autocomplete is also available as an experimental widget in InstantSearch,
  making it easier to integrate into your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Tip>

## Query Suggestions

These examples highlight the use of the `autocomplete-plugin-query-suggestions`
plugin to show suggested search queries in your autocomplete menu.

For more information, see [Build a Query Suggestions UI with Autocomplete](/doc/ui-libraries/autocomplete/guides/adding-suggested-searches).

### Search suggestions

<Card img="https://mintcdn.com/algolia/JoMDf1PtMFIqKpzx/images/ui-libraries/autocomplete/sandboxes/query-suggestions.png?fit=max&auto=format&n=JoMDf1PtMFIqKpzx&q=85&s=b1070607bf35cb2e55e9cea004c2fb1d" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions?file=/app.tsx" icon="codesandbox" horizontal width="1424" height="1052" data-path="images/ui-libraries/autocomplete/sandboxes/query-suggestions.png">As users start typing, the autocomplete menu shows suggested search queries.</Card>

### Search suggestions with categories

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-categories.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=aa8199381100681fd44d3621d8f1c892" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions-with-categories?file=/app.tsx" icon="codesandbox" horizontal width="1456" height="1232" data-path="images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-categories.png">The top suggestions are shown with categories to help users search more precisely.</Card>

### Search suggestions with inline categories

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-inline-categories.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=8206a99376656b6af3e78d910e594ebe" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions-with-inline-categories?file=/app.tsx" icon="codesandbox" horizontal width="1460" height="934" data-path="images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-inline-categories.png">Categories are shown on the same line as the suggestion for a more compact experience.</Card>

## Multiple sources

These examples highlight the use of multiple data sources for the autocomplete items.
The examples use multiple plugins, such as the `autocomplete-plugin-query-suggestions`,
`autocomplete-plugin-recent-searches`, and the `getAlgoliaResults` function to retrieve search results.

For more information, see [Sources](/doc/ui-libraries/autocomplete/core-concepts/sources).

### Search suggestions and results

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-hits.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=77470f29193ab7759ef567820c77c6d1" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions-with-hits?file=/app.tsx" icon="codesandbox" horizontal width="1416" height="1514" data-path="images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-hits.png">As users start typing, the autocomplete menu shows suggested searches and matching search results.</Card>

### Search suggestions and recent searches

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-recent-searches.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=1c1578c3cf14b0aa950d3822c13a1d72" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions-with-recent-searches?file=/app.tsx" icon="codesandbox" horizontal width="1438" height="664" data-path="images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-recent-searches.png">This autocomplete menu remembers previous searches and shows them on top of the suggested searches.</Card>

### Search suggestions with categories and recent searches

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-recent-searches-and-categories.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=fc8580d69808ffb1dc03ac151a1dad6e" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions-with-recent-searches-and-categories?file=/app.tsx" icon="codesandbox" horizontal width="1444" height="756" data-path="images/ui-libraries/autocomplete/sandboxes/query-suggestions-with-recent-searches-and-categories.png">This autocomplete menu shows the top search suggestions with their categories in addition to recent searches.</Card>

### Search suggestions with recent searches and search results

<Card img="https://mintcdn.com/algolia/JoMDf1PtMFIqKpzx/images/ui-libraries/autocomplete/sandboxes/reshape.png?fit=max&auto=format&n=JoMDf1PtMFIqKpzx&q=85&s=e0a2f8f8d001b7702761d38de97204e8" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/reshape?file=/app.tsx" icon="codesandbox" horizontal width="1362" height="1458" data-path="images/ui-libraries/autocomplete/sandboxes/reshape.png">In addition to recent searches and search suggestions, this autocomplete shows matching search results grouped by category.</Card>

### Federated ecommerce search experience

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/ecom-advanced-federated-experience-desktop.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=b41963314e9c5c712dbcd3dafa5bad5c" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/two-column-layout?file=/src/app.tsx" icon="codesandbox" horizontal width="1053" height="414" data-path="images/ui-libraries/autocomplete/sandboxes/ecom-advanced-federated-experience-desktop.png">This autocomplete menu features a two-column layout that shows recent searches and suggestions in the left column, and matching products in a grid in the right column.</Card>

## Integrate Autocomplete

These examples show how to integrate Autocomplete with InstantSearch or popular frontend frameworks.

### Autocomplete and React InstantSearch

<Card title="Autocomplete + React InstantSearch" img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/instantsearch.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=d88888286e7c6d7053b2d154aaab031e" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-instantsearch?file=/src/App.tsx" icon="codesandbox" horizontal width="1280" height="864" data-path="images/ui-libraries/autocomplete/sandboxes/instantsearch.png" />

### Autocomplete and InstantSearch.js

<Card title="Autocomplete + InstantSearch.js" img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/instantsearch.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=d88888286e7c6d7053b2d154aaab031e" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/instantsearch?file=/src/app.ts" icon="codesandbox" horizontal width="1280" height="864" data-path="images/ui-libraries/autocomplete/sandboxes/instantsearch.png" />

### Autocomplete and Vue InstantSearch

<Card title="Autocomplete + Vue InstantSearch" img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/instantsearch.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=d88888286e7c6d7053b2d154aaab031e" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/vue-instantsearch?file=/src/App.vue" icon="codesandbox" horizontal width="1280" height="864" data-path="images/ui-libraries/autocomplete/sandboxes/instantsearch.png" />

### Autocomplete and React

<Card title="Custom React renderer" img="https://mintcdn.com/algolia/JoMDf1PtMFIqKpzx/images/ui-libraries/autocomplete/sandboxes/react-renderer.png?fit=max&auto=format&n=JoMDf1PtMFIqKpzx&q=85&s=9c37c1333531c947d0a83a1fbf99e724" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/react-renderer?file=/src/Autocomplete.tsx" icon="codesandbox" horizontal width="1438" height="1184" data-path="images/ui-libraries/autocomplete/sandboxes/react-renderer.png" />

## Other

These examples highlight other autocomplete features and plugins.

### Static sources

<Card img="https://mintcdn.com/algolia/Gja8rtqcY6eJARlr/images/ui-libraries/autocomplete/sandboxes/github-repositories.png?fit=max&auto=format&n=Gja8rtqcY6eJARlr&q=85&s=ba9ce275e7b87f48f6b66330b0c046b4" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/github-repositories-custom-plugin?file=/app.tsx" icon="codesandbox" horizontal width="1412" height="820" data-path="images/ui-libraries/autocomplete/sandboxes/github-repositories.png">As users start typing, this autocomplete menu shows matching predefined links to GitHub repositories.</Card>

### Recently-viewed items

<Card img="https://mintcdn.com/algolia/JoMDf1PtMFIqKpzx/images/ui-libraries/autocomplete/sandboxes/recently-viewed-items.png?fit=max&auto=format&n=JoMDf1PtMFIqKpzx&q=85&s=4c5f71d5199222a2a08ad5b5fa320330" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/recently-viewed-items?file=/app.tsx" icon="codesandbox" horizontal width="1402" height="498" data-path="images/ui-libraries/autocomplete/sandboxes/recently-viewed-items.png">This autocomplete menu remembers items that users have previously viewed and shows them *before* the user starts typing (empty query).</Card>

### Redirect searches

<Card img="https://mintcdn.com/algolia/JoMDf1PtMFIqKpzx/images/ui-libraries/autocomplete/sandboxes/redirect-url.png?fit=max&auto=format&n=JoMDf1PtMFIqKpzx&q=85&s=a40712c2c496b8ee5ca203e47cac0d50" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/redirect-url?file=/app.tsx" icon="codesandbox" horizontal width="800" height="487" data-path="images/ui-libraries/autocomplete/sandboxes/redirect-url.png">This autocomplete menu redirects users to other pages if the query matches predefined criteria.</Card>