> For the complete documentation index, see [llms.txt](https://docs.nosto.com/techdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nosto.com/techdocs/implementing-nosto/implement-search/using-search-templates-starter/customizations/autocomplete-features.md).

# Autocomplete features

## Enabling Autocomplete Features

This document explains how to enable and configure various features for the autocomplete component, including category suggestions and trending searches.

To enable these features, you only need to modify the `withAutocompleteDefaults` function in `src/config.ts` to request the necessary data. The UI components in `src/components/Autocomplete/Results/` are already set up to render this data once it's fetched.

***

### Enabling Category Suggestions

You can enhance the autocomplete experience by including category suggestions alongside product and keyword results.

#### Configuration

To enable this feature, add a `categories` object to the query returned by the `withAutocompleteDefaults` function.

**File to edit:** `src/config.ts`

```typescript
// src/config.ts

function withAutocompleteDefaults(query: SearchQuery) {
  return {
    ...query,
    // ... other properties
    categories: {
      fields: ["name", "url"],
      size: 3 // The maximum number of category suggestions to fetch
    }
  } satisfies SearchQuery
}
```

#### How It Works

By adding the `categories` object to the query, you are instructing `@nosto/search-js` to fetch category suggestions. The `useResponse` hook within the `Results` component (`src/components/Autocomplete/Results/Results.tsx`) will then receive this data.

The `Results` component, in turn, passes the category data to the `Categories` component (`src/components/Autocomplete/Results/Categories.tsx`), which is responsible for rendering the suggestions. No additional rendering configuration is needed.

***

### Enabling Popular Searches

Displaying popular searches can help guide users and improve product discovery. This feature shows suggestions based on what other shoppers are searching for.

#### Configuration

To enable this feature, add a `popularSearches` object to the query returned by the `withAutocompleteDefaults` function.

**File to edit:** `src/config.ts`

```typescript
// src/config.ts

function withAutocompleteDefaults(query: SearchQuery) {
  return {
    ...query,
    // ... other properties
    popularSearches: {
      fields: ["query"],
      size: 3 // The maximum number of trending searches to fetch
    }
  } satisfies SearchQuery
}
```

#### How It Works

Similar to category suggestions, adding the `popularSearches` object to the query will cause the data to be fetched. The `useResponse` hook in the `Results` component will receive the data and pass it to the `PopularSearches` component (`src/components/Autocomplete/Results/PopularSearches.tsx`), which handles the rendering automatically.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/techdocs/implementing-nosto/implement-search/using-search-templates-starter/customizations/autocomplete-features.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.