---
title: NextQueries
tags: UI reference
---

# NextQueries

This component renders a list of next query suggestions, allowing the user to
select one of them, and emitting the needed events.

A next query is a suggestion for a new search that is related to the previous query. For example, if shoppers normally search for “milk” after searching for “cereal”, “milk” would be a next query of “cereal”.

## Props

| Name | Description | Type | Default |
| ------------------ | --------------------------------------------------- | -------- | ------- |
| `animation` | Animation component used to animate the suggestions | `Vue` | None |
| `maxItemsToRender` | Number of next queries to be rendered | `number` | `5` |

## Slots

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

## Events

None

## See it in action

You don't need to pass any props, or slots. Simply add the component, and when it has any next
queries, it shows them.

_Try writing “barbie” to view suggested next queries._

<SearchInput></SearchInput>
<NextQueries />

#### Play with props

The component has two optional props: `animation` to render the component with an animation and
`maxItemToRender` to limit the number of the next queries rendered.

In this example, the number of next queries has been limited to 10 and the next queries slide in from the left side as you type.

_Try writing “playmobil” and see how the suggested next queries are displayed._

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

#### Play with suggestion slot

You can override the content of the `NextQueries` component. In this example, instead of using the default `button` tag for a next query, an HTML span element has been used for the content. A text is added at the same hierarchical level as the `NextQuery` component. This text element does not trigger any events, unlike the next query suggestion itself, and is used for information only.

_Try typing “lego” and view suggested next queries. Click the “Shoppers also search for:” text and then click a next query suggestion to see the component in action._

<SearchInput></SearchInput>
<NextQueries>
  <template #suggestion="{suggestion}">
    <span>Shoppers also search for:</span>
    <NextQuery :suggestion="suggestion" class="x-next-queries__suggestion">
      <template #default="{suggestion}">
        <span class="x-next-query__query">{{ suggestion.query }}</span>
      </template>
    </NextQuery>
  </template>
</NextQueries>

#### Play with suggestion-content slot

In this example, instead of using the default next query content, an icon
is added, as well as an HTML span element with the query of the next query suggestion.

_Type “pokemon” and view the custom layout of the suggested next queries._

<SearchInput></SearchInput>
<NextQueries>
  <template #suggestion-content="{suggestion}">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="2" stroke="black" />
    </svg>
    <span class="x-next-query__query">{{ suggestion.query }}</span>
  </template>
</NextQueries>