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

Empathy X Components

---

title: NextQueries

---

# NextQueries

Simple next-queries component that renders a list of
[`BaseSuggestions`](./x-components.base-suggestions.md),
allowing the user to select one of them, and emitting the needed events. A next query is a
suggestion for a new search, related to your previous query. I.e. If people normally search
for `shirts`, and then `trousers`, `trousers` would be a next query of `shirts`.

## Props

| Name                          | Description                                                                 | Type                          | Default            |
| ----------------------------- | --------------------------------------------------------------------------- | ----------------------------- | ------------------ |
| <code>highlightCurated</code> | Flag to indicate if the curated next queries should be displayed different. | <code>boolean</code>          | <code>false</code> |
| <code>suggestions</code>      | NextQueries list to be used instead of state NextQueries.                   | <code>NextQueryModel[]</code> | <code></code>      |

## Slots

| Name                            | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                               |
| ------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>suggestion</code>         | Next Query item    | **highlightCurated** <code>boolean</code> - True if the curated NQs should be highlighted<br />**v-bind** <code>Object</code> - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next Query suggestion index |
| <code>suggestion-content</code> | Next Query content | **v-bind** <code>Object</code> - Next Query suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** <code>Suggestion</code> - Next Query suggestion data<br />&nbsp;&nbsp;- **index** <code>number</code> - Next 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` |         |

## Examples

### Basic example

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

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

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

export default {
  name: 'NextQueriesDemo',
  components: {
    SearchInput,
    NextQueries,
  },
}
</script>
```

The component has three optional props. `animation` to render the component with an animation,
`maxItemsToRender` to limit the number of next queries will be rendered (by default it is 5) and
`highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.

```vue live
<template>
  <div>
    <SearchInput />
    <NextQueries :animation="'FadeAndSlide'" :maxItemsToRender="10" :highlightCurated="true" />
  </div>
</template>

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

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

### Overriding Next Queries' Content

You can use your custom implementation of the Next Query's content. In the example below, instead of
using the default Next Query's content, an icon is added, as well as a span with the query of the
Next Query suggestion.

```vue live
<template>
  <div>
    <SearchInput />
    <NextQueries>
      <template #suggestion-content="{ suggestion }">
        <TrendingIcon />
        <span class="x-next-query__query">{{ suggestion.query }}</span>
      </template>
    </NextQueries>
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { NextQueries } from '@empathyco/x-components/next-queries'
import { TrendingIcon } from '@empathyco/x-components'

export default {
  name: 'NextQueriesDemo',
  components: {
    SearchInput,
    NextQueries,
    TrendingIcon,
  },
}
</script>
```

### Adding a custom next query component

You can use your custom implementation of a next query component. To work correctly, it should use
the `emitNextQuerySelected` function when the next query is selected. In the example below, instead
of using the default `button` tag for a next query, an icon is added, and the text of the next query
is wrapped in a `span`

```vue live
<template>
  <div>
    <SearchInput />
    <NextQueries>
      <template #suggestion="{ suggestion }">
        <NextQuery :suggestion="suggestion" class="x-next-queries__suggestion">
          <template #default="{ suggestion }">
            <TrendingIcon />
            <span class="x-next-query__query">{{ suggestion.query }}</span>
          </template>
        </NextQuery>
        <button>Custom Behaviour</button>
      </template>
    </NextQueries>
  </div>
</template>

<script>
import { SearchInput } from '@empathyco/x-components/search-box'
import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'
import { TrendingIcon } from '@empathyco/x-components'

export default {
  name: 'NextQueriesDemo',
  components: {
    SearchInput,
    NextQueries,
    NextQuery,
    TrendingIcon,
  },
}
</script>
```