QuerySuggestions

This component renders a list of possible search queries to select from as a query is entered in the input field. By default, this is a list of QuerySuggestion components.

Slots

Name	Description	Bindings (name - type - description)
suggestion	Custom component that replaces the QuerySuggestion component	v-bind Object - Query Suggestion attributes:   - suggestion Suggestion - Query Suggestion data   - index number - Query Suggestion index
suggestion-content	Custom content that replaces the QuerySuggestion default content	v-bind Object - Query Suggestion attributes:   - suggestion Suggestion - Query Suggestion data   - index number - Query Suggestion index

Inherited props

This component inherits the BaseSuggestions props.

Name	Description	Type	Default
animation	Animation component for QuerySuggestions.	Vue	"ul"
maxItemsToRender	Number of query suggestions to be rendered.	number

See it in action

Backend microservice required

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

In this example, a list of query suggestions is displayed. See how the suggestions change as you type “sandal”. If you click on a suggestion, the search term in the search input is updated and the query suggestions are changed to reflect the new search term.

Type “sandal” or another fashion term in the input field to try it out!

Play with props

In this example, an StaggeredFadeAndSlide animation component has been passed as prop, so that the matching query suggestions are shuffled with a slight delay as more letters of the term are typed.

Type “lipstick” or another fashion term in the input field to try it out!

Play with suggestion slot

Here, the suggestion binding property passes the suggestion data.

Type “bag” or another fashion term in the input field to try it out!

danger

If you're not using the QuerySuggestion component, then you must implement the UserAcceptedAQuery and UserSelectedAQuerySuggestion events in QuerySuggestions.

Play with suggestion-content slot

In this example, the suggestion and query properties of the suggestion-content slot are used to paint a suggestion with an icon.

Type “trousers” or another toy in the input field to try it out!

Extending the component

Components can be combined and communicate with each other. Commonly, the QuerySuggestions component communicates with the SearchInput, updating the term in the search input.

Type “pants” or another toy in the input field to try it out!