---
# System prepended metadata

title: PopularSearches
tags: [UI reference]

---

---
title: PopularSearches
tags: UI reference
---

# PopularSearches

This component renders a list of [popular search suggestions](popular-search.md), allowing the user to select one of the search queries, and emitting the associated events. 

## Props

| Name            | Description                                             | Type      | Default |
| -------------------- | -------------------------------------------------- | --------- | ------- |
|  `animation`         |  Animation component used to animate the suggestions.  |  `Vue`    |        |
|  `maxItemsToRender`  |  Number of popular searches to be rendered.                         |  `number` |   `5`   |


## Slots

| Name            | Description              | Bindings </br>(name - type - description)                                                                                                        | 
| ---------------- | ------------------------|------------------------------------------- | 
|  `suggestion`          |  Popular search item.     |  **suggestion** - `Suggestion` - Popular search suggestion data.<br/>**index** `number` - Popular search suggestion index.   | 
|  `suggestion-content`  |  Popular search content.  |  **suggestion** `Suggestion` - Popular search suggestion data.<br/>**index** `number` - Popular search suggestion index.   | 

## Events

This component emits the following events:

- `PopularSearchesRequestChanged`
- `PopularSearchDisplayed`

## See it in action

<!-- prettier-ignore-start -->
::: warning Backend service required  
The Empathize microservice must be implemented.
:::
<!-- prettier-ignore-end -->

You don't need to pass any specific props or slots to render this component. Simply add it and if there are any popular searches, it will render them as a clickable query below the search box before the user has even submitted a query.

_Click any of the popular searches and observe the reaction in the search input._

```vue live
<SearchInput></SearchInput>
<PopularSearches />
```

### Play with props  

The component has two optional props: `animation` to render the component with a specific animation and `maxItemToRender` to limit the number of popular searches to be rendered.

In this example, the number of popular searches displayed has been extended to 10, instead of 5. A fade and slide effect has been added so that when you click a popular search, it fades and the other popular searches slide upwards.

_Click the second popular search suggestion in the list to see how the suggestions below are animated._ 

```vue live
<SearchInput></SearchInput>
<PopularSearches :animation="'FadeAndSlide'" :maxItemsToRender="10" />
```

## Play with suggestion slot

You can use the `suggestion` slot to override the entire popular search item.    

In this example, the default implementation of the popular search in `PopularSearches` has been overridden, using an `span` element as content.   
A text is added at the same hierarchical level as the `PopularSearch` component. This text element does not trigger any events (like when you click the popular search suggestion itself) and is used for information only.

_Click on the “Have you tried?” text and then on the popular search suggestion to see the component in action._ 

```vue live
<SearchInput></SearchInput>
<PopularSearches>
<template #suggestion="{suggestion}">
  <span>Have you tried?</span>
  <PopularSearch :suggestion="suggestion">
    <template #default="{suggestion}">
      <span class="x-popular-search__query">{{ suggestion.query }}</span>
    </template>
  </PopularSearch>
</template>
</PopularSearches>
```


#### Play with suggestion-content slot  

You can also use the `suggestion-content` slot to override the popular search content itself.

In this example, instead of using the default popular search content, a span element with an icon and the query of the popular search suggestion have been added.   
A custom class has been added to the span element and `PopularSearches` to control the styles and position of the custom suggestions.

_Click on the popular search suggestion and observe the search input._ 

```vue live
<SearchInput></SearchInput>
<PopularSearches class="x-popular-searches--tags">
<template #suggestion-content="{ suggestion }">
  <span class="custom-tag">
    <svg height="10" width="10">
        <circle cx="5" cy="5" r="2" stroke="black" />
    </svg>
    {{ suggestion.query }}
  </span>
</template>
</PopularSearches>
```







