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

Front-End Options

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 build a multi-category autocomplete menu 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?