---
updatedAt: 2026-09-16T18:42:57.000Z
agentTools:
  siteIndex: https://documentation.bloomreach.com/llms.txt
  projectIndex: https://documentation.bloomreach.com/discovery/llms.txt
---

# Implement Autosuggest

This example demonstrates how to set up Bloomreach's  [Autosuggest](https://documentation.bloomreach.com/discovery/docs/autosuggest) feature. See the `config.js` file to configure the example to run for your Account and Catalog.

<Image src="https://files.readme.io/62cea64-Screenshot_2024-05-16_at_14.02.25.png" alt="Demo preview" align="center" width="700px" caption="Demo preview" border={true} />

## How to Use

* Download the example or clone the repository to your local machine.
* Install the dependencies and run the development server.

```
npm ci
npm start
```

OR

Edit right away in Sandbox.

<HTMLBlock>{`
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeSandbox Favicon Example</title>
    <link rel="icon" type="image/png" href="https://codesandbox.io/favicon.ico">
</head>


<div class="feature-integrations-wrapper">
  <div class="card-with-icon-wrapper">
    <a href="https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/autosuggest" class="card-with-icon-item justify-content-center">
      <p><img src="https://thesvg.org/icons/codesandbox/default.svg" alt="CodeSandbox Favicon" width="50" height="50">Sandbox Demo</p>
    </a>
  </div>
  
  <div class="card-with-icon-wrapper">
    <a href="https://github.com/bloomreach/web-code-samples/blob/main/examples/autosuggest/README.md" class="card-with-icon-item justify-content-center">
      <p><svg height="40" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="40" data-view-component="true" class="octicon octicon-mark-github">
    <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
</svg> View Repo</p>
    </a>
  </div>
</div>
`}</HTMLBlock>

#