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.
| User input stage | query.text field | Best practice (action) | Recommendation |
|---|---|---|---|
| Initial focus (no input) | Empty | Display trending suggestions for the locale | Use maxResults to show 6-10 popular terms. This provides immediate inspiration and discovery |
| Completion stage | 3+ characters For example: "dre" | Switch to displaying query autocomplete suggestions | Use maxResults to show 6-8 highly relevant term completions. Ensure these terms are direct continuations of the input |
| High confidence | 5+ characters | Continue with query autocomplete, but reduce the number of suggestions to make room for product/content recommendations (see the next section) | Use 4-6 term completions to prioritize visual product results |
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:
| Recommendation type | Purpose | API integration point |
|---|---|---|
| Recently viewed/purchased | Provides a highly personalized shortcut for returning users | Most effective when the input is empty or short (Trending stage) |
| Popular products | Provides proof of social currency and high-converting items | 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
Updated about 5 hours ago