QuerySuggestion

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.

Props

Name	Description	Type	Default
suggestion	The suggestion to render.	Suggestion

Slots

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 \

Events

This component emits the following events:

• UserSelectedAQuerySuggestion (opens new window): the event is emitted after the user clicks the button. The event payload is the query suggestion data.

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.