1 min read



This component renders a suggestion for a query. A query suggestion is a recommended query based on previous search queries. It contains the query itself and a set of filters associated. For example, if you're searching for shirt, a query suggestion could be long sleeve shirt.


Name Description Type Default
suggestion The suggestion to render. Suggestion


Name Description Bindings
(name - type - description)
default Query Suggestion content v-bind Object - BaseSuggestion default slot scope: suggestion Suggestion - Suggestion data
query string - The query that the suggestion belongs to
filter Filter \


This component emits the following events:

See it in action

Backend microservice required

To use this component, the Empathize microservice must be implemented.

Here you can see how a single query suggestion is rendered using the suggestion prop.

Play with default slot

In this example, we are adding an emoji next to the suggestion.

Play with events

In this example, when you click on the query suggestion, a message is displayed to illustrate that the UserSelectedAQuerySuggestion event has been triggered.