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

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

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