NextQueries

Simple next-queries component that renders a list of BaseSuggestions, allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for shirts, and then trousers, trousers would be a next query of shirts.

Props

Name	Description	Type	Default
highlightCurated	Flag to indicate if the curated next queries should be displayed different.	boolean	false
suggestions	NextQueries list to be used instead of state NextQueries.	NextQueryModel[]

Slots

Name	Description	Bindings (name - type - description)
suggestion	Next Query item	highlightCurated boolean - True if the curated NQs should be highlighted v-bind Object - Next Query suggestion attributes:   - suggestion Suggestion - Next Query suggestion data   - index number - Next Query suggestion index
suggestion-content	Next Query content	v-bind Object - Next Query suggestion attributes:   - suggestion Suggestion - Next Query suggestion data   - index number - Next Query suggestion index

Inherited props

This component inherits the BaseSuggestions props.

Name	Description	Type	Default
animation	Animation component that will be used to animate the suggestions.	Vue	"ul"
maxItemsToRender	Number of popular searches to be rendered.	number

Examples

Basic example

You don't need to pass any props, or slots. Simply add the component, and when it has any next queries it will show them

The component has three optional props. animation to render the component with an animation, maxItemsToRender to limit the number of next queries will be rendered (by default it is 5) and highlightCurated to indicate if the curated Next Queries inside the list should be highlighted.

Overriding Next Queries' Content

You can use your custom implementation of the Next Query's content. In the example below, instead of using the default Next Query's content, an icon is added, as well as a span with the query of the Next Query suggestion.

Adding a custom next query component

You can use your custom implementation of a next query component. To work correctly, it should use the emitNextQuerySelected function when the next query is selected. In the example below, instead of using the default button tag for a next query, an icon is added, and the text of the next query is wrapped in a span