---
title: HistoryQueries
tags: UI reference
---

# HistoryQueries

This component renders a list of suggestions from the user's search query history. A history query is just another type of suggestion that contains a query that the user has made in the past.

This component allows the user to select one of the history queries and can emit the associated events.

## Props

| Name | Description | Type | Default |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `animation ` | Animation component used to animate the suggestions. | `Vue` | None |
| `maxItemsToRender` | Maximum number of history queries to show. It should be lower than the HistoryQueriesConfig.maxItemsToStore number. | `number` | None |

## Methods

None

## Slots

| Name | Description | Bindings </br> (name - type - description) |
| ------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| suggestion | History Query item | **suggestion** - `Suggestion` - History Query suggestion data </br>**index** - `number` - History Query suggestion index |
| suggestion-content | History Query content | **suggestion** - `Suggestion` - History Query suggestion data </br>**index** - `number` - History Query suggestion index </br> **queryHTML** - `string` - Suggestion query with the matching part inside an HTML span tag |
| suggestion-remove-content | History Query remove button content | **suggestion** - `Suggestion` - History Query suggestion data </br>**index** - `number` - History Query suggestion index |

## Events

None

## See it in action

The `HistoryQueries` component renders all the queries that you previously typed. It doesn't require any extras to be rendered.

_Try typing multiple queries in the search input and press Enter. Clear the input and see how the history queries are rendered below the search box._

<SearchInput ></SearchInput>
<HistoryQueries></HistoryQueries>

### Play with Props

The component has two optional props, `animation` to render the component with an animation, and `maxItemToRender` to limit the number of history queries that are rendered. In this example, the history queries have been limited to 10, showing only the last 10 queries, and an animation has been added.

_Try entering more than 10 queries in the search input and see how the queries are animated._

<SearchInput ></SearchInput>
<HistoryQueries
  :animation="'FadeAndSlide'"
  :maxItemsToRender="10"
></HistoryQueries>

### Play with suggestion slot

The default `HistoryQuery` component that is used in every suggestion can be replaced.
To do this, use the `suggestion` slot to pass the history query data in the
`suggestion` property. Here an icon has been passed in the `suggestion` slot.
::: warning

If you don't use the [HistoryQuery](../history-queries/history-query.md) component, you need to implement the associated event `UserSelectedAHistoryQuery`.

:::

_Enter multiple queries in the search input and see how the history queries are rendered._

<SearchInput ></SearchInput>
<HistoryQueries>
<template #suggestion="{ suggestion }">
  <img src="/assets/icons/history.svg"/>
  <HistoryQuery :suggestion="suggestion"/>
</template>
</HistoryQueries>

#### Play with suggestion-content and suggestion-remove-content slot

You can override the content of the `HistoryQuery` component. To replace the default
suggestion content, use the `suggestion-content` slot to pass the history query
suggestion (in the `suggestion` property), and the matching query part HTML (in the
`queryHTML` property).

_Enter multiple queries in the search input and then remove the queries one-by-one._

<SearchInput ></SearchInput>
<HistoryQueries>
<template #suggestion-content="{ queryHTML }">
  <img src="/assets/icons/history.svg"/>
  <span v-html="queryHTML"></span>
</template>
<template #suggestion-remove-content>
  <img src="/assets/icons/cross-dark.svg"/>
</template>
</HistoryQueries>