Guides / Building Search UI / UI & UX patterns / Query Suggestions

This guide uses an outdated version of Autocomplete. Algolia recommends using Autocomplete v1 instead.

To migrate from v0 to v1, please refer to the upgrade guide.

You can build the front end for your Query Suggestions index in different ways. This guide outlines some options.

Building an autocomplete dropdown

The most straightforward front-end implementation of Query Suggestions is one that displays suggestions in an autocomplete dropdown. When users select a suggestion, they’re brought to a page with the search results for the suggested query. Please see the guide on how to build an autocomplete menu using the InstantSearch libraries for implementation details.

Combining suggestions and results in the same dropdown

Another display option is to combine suggestions and results within the same dropdown box. Refer to the guide on how to include multiple result types in your autocomplete for more information.

Combining suggestions and results in the same dropdown is especially effective on mobile. Check out the Android Query Suggestions UI guide and iOS Query Suggestions UI guide.

Did you find this page helpful?