---
updatedAt: 2026-01-22T11:08:33.000Z
---

# Autosuggest Best Practices

To maximize conversion and user satisfaction, effective autosuggest implementation requires a dynamic approach that adjusts based on user input and combines query suggestions with other recommendation types.

### Dynamic display logic

The primary goal is to provide the most helpful information at every stage of the user's search process.

[block:parameters]
{
  "data": {
    "h-0": "<span style=\"color:gray; font-size:0.9em;\">User input stage ",
    "h-1": "<span style=\"color:Gray; font-size:0.9em;\">query.text field",
    "h-2": "<span style=\"color:Gray; font-size:0.9em;\">Best practice (action)",
    "h-3": "<span style=\"color:Gray; font-size:0.9em;\">Recommendation",
    "0-0": "<span style=\"font-size:0.9em;\">**Initial focus (no input)**</span>",
    "0-1": "<span style=\"font-size:0.9em;\">**Empty**</span>",
    "0-2": "<span style=\"font-size:0.9em;\">Display **trending suggestions** for the locale</span>",
    "0-3": "<span style=\"font-size:0.9em;\">Use maxResults to show **6-10 popular terms**. This provides immediate inspiration and discovery</span>",
    "1-0": "<span style=\"font-size:0.9em;\">**Completion stage**</span>",
    "1-1": "<span style=\"font-size:0.9em;\">**3+ characters**</span>  \n<span style=\"color:gray; font-size:0.8em;\">For example: \"dre\"</span>",
    "1-2": "<span style=\"font-size:0.9em;\">Switch to displaying **query autocomplete suggestions** </span>",
    "1-3": "<span style=\"font-size:0.9em;\">Use maxResults to show **6-8 highly relevant term completions**. Ensure these terms are direct continuations of the input</span>",
    "2-0": "<span style=\"font-size:0.9em;\">**High confidence**</span>",
    "2-1": "<span style=\"font-size:0.9em;\">**5+ characters**</span>",
    "2-2": "<span style=\"font-size:0.9em;\">Continue with query autocomplete, but reduce the number of suggestions to make room for **product/content recommendations** </span><span style=\"color:gray; font-size:0.8em;\">(see the next section)</span>",
    "2-3": "<span style=\"font-size:0.9em;\">Use **4-6 term completions** to prioritize visual product results</span>"
  },
  "cols": 4,
  "rows": 3,
  "align": [
    "left",
    "left",
    "left",
    "left"
  ]
}
[/block]

### Combine Autosuggest with user-specific recommendations

The true power of a modern search box is combining the API's query suggestions with personalized recommendations in a single, unified dropdown panel. While the Autosuggest API provides query terms, you should simultaneously integrate calls to your recommendation engine (or another API) to surface the following:

| <span style="color:gray; font-size:0.9em;">Recommendation type | <span style="color:gray; font-size:0.9em;">Purpose                                         | <span style="color:gray; font-size:0.9em;">API integration point                                              |
| :------------------------------------------------------------- | :----------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
| <span style="font-size:0.9em;">**Recently viewed/purchased**   | <span style="font-size:0.9em;">Provides a highly personalized shortcut for returning users | <span style="font-size:0.9em;">Most effective when the input is empty or short (Trending stage)               |
| <span style="font-size:0.9em;">**Popular products**            | <span style="font-size:0.9em;">Provides proof of social currency and high-converting items | <span style="font-size:0.9em;">Excellent to display alongside Trending Suggestions or short input (1-3 chars) |

**Implementation tip:** Use a two-column layout for your autosuggest dropdown. Dedicate one column to the Autosuggest API terms (always present) and the other to product/content recommendations (contextually dependent on the input). This creates a powerful, highly-converting visual experience