PopularSearches
PopularSearches
Simple popular-searches component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A popular search is just a query that has been searched a lot in a certain period and may optionally have associated a set of filters.
Slots
| Name | Description | Bindings (name - type - description) |
|---|---|---|
suggestion | Popular Search item | v-bind Object - Popular Search suggestion attributes:- suggestion Suggestion - Popular Search suggestion data- index number - Popular Search suggestion index |
suggestion-content | Popular Search content | v-bind Object - Popular Search suggestion attributes:- suggestion Suggestion - Popular Search suggestion data- index number - Popular Search 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
Default Usage
You don't need to pass any props, or slots. Simply add the component, and when it has any popular searches it will show them.
The component has two optional props. animation to render the component with an animation and
maxItemsToRender to limit the number of popular searches will be rendered (by default it is 5).
Overriding Popular Search's Content
You can use your custom implementation of the Popular Search's content. In the example below, instead of using the default Popular Search's content, an icon is added, as well as a span with the query of the Popular Search's suggestion.
Adding a Custom Popular Search Item
You can use your custom implementation for the whole Popular Search item. In the example below, we change the default implementation of the Popular Search in Popular Searches. A custom Popular Search implementation is added, it has an image and a span as content (as in the previous example). Also, a button with a user customized behaviour is added at the same hierarchical level as the Popular Search component.