@empathyco/x-components/docs/API-reference/components/history-queries/x-components.history-queries.md

Empathy X Components

---

title: HistoryQueries

---

# HistoryQueries

This component renders a list of suggestions coming from the user queries history.
Allows the user to select one of them, emitting the needed events. A history query is just
another type of suggestion that contains a query that the user has made in the past.

## Slots

| Name                                   | Description                         | Bindings<br />(name - type - description)                                                                                                                                                                                                         |
| -------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>suggestion</code>                | History Query item                  | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index |
| <code>suggestion-content</code>        | History Query content               | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query suggestion index |
| <code>suggestion-remove-content</code> | History Query remove button content | **v-bind** <code>Object</code> - History Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - History Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - History Query 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` |         |

## Events

This component doesn't emit events.

## See it in action

Here you have a basic example of how the HistoryQueries is rendered.

```vue live
<template>
  <div>
    <SearchInput />
    <HistoryQueries />
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { HistoryQueries } from '@empathyco/x-components/history-queries'

export default {
  name: 'HistoryQueriesDemo',
  components: {
    SearchInput,
    HistoryQueries,
  },
}
</script>
```

### Play with props

In this example, the history queries have been limited to render a maximum of 10 queries (by default
it is 5).

```vue live
<template>
  <div>
    <SearchInput />
    <HistoryQueries :maxItemsToRender="10" />
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { HistoryQueries } from '@empathyco/x-components/history-queries'

export default {
  name: 'HistoryQueriesDemo',
  components: {
    SearchInput,
    HistoryQueries,
  },
}
</script>
```

### Play with the animation

```vue live
<template>
  <div>
    <SearchInput />
    <HistoryQueries :animation="'FadeAndSlide'" />
  </div>
</template>

<script>
import Vue from 'vue'
import { SearchInput } from '@empathyco/x-components/search-box'
import { HistoryQueries } from '@empathyco/x-components/history-queries'
import { FadeAndSlide } from '@empathyco/x-components'

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

### Play with suggestion slot

In this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the
`suggestion` slot (although any other component could potentially be passed).

```vue live
<template>
  <div>
    <SearchInput />
    <HistoryQueries #suggestion="{ suggestion }">
      <HistoryQuery :suggestion="suggestion" />
    </HistoryQueries>
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'

export default {
  name: 'HistoryQueriesDemo',
  components: {
    SearchInput,
    HistoryQueries,
    HistoryQuery,
  },
}
</script>
```

### Play with suggestion-content slot

To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
passed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also
passed.

```vue live
<template>
  <div>
    <SearchInput />
    <HistoryQueries #suggestion-content="{ suggestion }">
      <span>{{ suggestion.query }}</span>
    </HistoryQueries>
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { HistoryQueries } from '@empathyco/x-components/history-queries'

export default {
  name: 'HistoryQueriesDemo',
  components: {
    SearchInput,
    HistoryQueries,
  },
}
</script>
```

### Play with suggestion-content-remove slot

To continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is
passed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the
icon to remove the history query.

```vue live
<template>
  <div>
    <SearchInput />
    <HistoryQueries #suggestion-remove-content="{ suggestion }">
      <CrossIcon />
    </HistoryQueries>
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { HistoryQueries } from '@empathyco/x-components/history-queries'
import { CrossIcon } from '@empathyco/x-components'

export default {
  name: 'HistoryQueriesDemo',
  components: {
    SearchInput,
    HistoryQueries,
    CrossIcon,
  },
}
</script>
```