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.

Combining InstantSearch with Query Suggestions

One type of advanced UI combines the power of Query Suggestions with InstantSearch results. As the user types, two areas of the screen change: the suggested queries and the new results.

Seeing both suggested queries and results can help users make search decisions. To see how this looks, check out the InstantSearch with Query Suggestions demo.

Did you find this page helpful?