On this page
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 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.