@empathyco/x-components/docs/API-reference/components/popular-searches/x-components.popular-searches.md

Empathy X Components

---

title: 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<br />(name - type - description)                                                                                                                                                                                                            |
| ------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>suggestion</code>         | Popular Search item    | **v-bind** <code>Object</code> - Popular Search suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Popular Search suggestion index |
| <code>suggestion-content</code> | Popular Search content | **v-bind** <code>Object</code> - Popular Search suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Popular Search suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Popular Search suggestion index |

## Inherited props

This component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)
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.

```vue live
<template>
  <PopularSearches />
</template>

<script>
import { PopularSearches } from '@empathyco/x-components/popular-searches'
export default {
  name: 'PopularSearchesDemo',
  components: {
    PopularSearches,
  },
}
</script>
```

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).

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

<script>
import Vue from 'vue'
import { PopularSearches } from '@empathyco/x-components/popular-searches'
import FadeAndSlide from '@empathyco/x-components'

// Registering the animation as a global component
Vue.component('FadeAndSlide', FadeAndSlide)
export default {
  name: 'PopularSearchesDemo',
  components: {
    PopularSearches,
    FadeAndSlide,
  },
}
</script>
```

### 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.

```vue live
<template>
  <PopularSearches>
    <template #suggestion-content="{ suggestion }">
      <TrendingIcon />
      <span class="x-popular-search__query">{{ suggestion.query }}</span>
    </template>
  </PopularSearches>
</template>

<script>
import { PopularSearches } from '@empathyco/x-components/popular-searches'
import { TrendingIcon } from '@empathyco/x-components'

export default {
  name: 'PopularSearchesDemo',
  components: {
    PopularSearches,
    TrendingIcon,
  },
}
</script>
```

### 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.

```vue live
<template>
  <PopularSearches>
    <template #suggestion="{ suggestion }">
      <PopularSearch :suggestion="suggestion">
        <template #default="{ suggestion }">
          <TrendingIcon />
          <span class="x-popular-search__query">{{ suggestion.query }}</span>
        </template>
      </PopularSearch>
      <button>Custom Behaviour</button>
    </template>
  </PopularSearches>
</template>

<script>
import { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches'
import { TrendingIcon } from '@empathyco/x-components'

export default {
  name: 'PopularSearchesDemo',
  components: {
    PopularSearches,
    PopularSearch,
    TrendingIcon,
  },
}
</script>
```