---
title: QuerySuggestions
tags: UI reference
---

# QuerySuggestions

This component renders a list of possible search queries to select from as a query is entered in the input field. By default, this is a list of [`QuerySuggestion`](query-suggestion.md) components.

[//]: # ( in a @remarks block )
A query suggestion is a recommended query based on previous search queries. It contains the query itself and a set of filters associated. For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.

## Props

| Name | Description | Type | Default |
| ----------- | ------------------------------------------ | ----- | ------- |
| `animation` | Animation component for `QuerySuggestions`. | `Vue` | |

## Slots

| Name | Description | Bindings </br> (name - type - description) |
| -------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `suggestion` | Overrides the [`QuerySuggestion`](./query-suggestion.md) component | **suggestion** - `suggestion` - Query suggestion data <br/> **index** - `number` -Query suggestion index |
| `suggestion-content` | Overrides the content of the [`QuerySuggestion`](./query-suggestion.md) component | **suggestion** - `suggestion` - Query suggestion data <br/> **index** - `number` - Query suggestion index <br/> **queryHTML** - None - Query suggestion data wrapped in an HTML span tag |

## See it in action

<!--prettier-ignore-start-->
:::warning Backend service required
To use this component, the Empathize microservice must be implemented.
:::
<!--prettier-ignore-end-->

In this example, a list of query suggestions is displayed. See how the suggestions change as you type “puzzle”. If you click on a suggestion, the search term in the search input is updated and the query suggestions are changed to reflect the new search term.

_Type “puzzle” or another toy in the input field to try it out!_

<template>
  <SearchInput />
  <QuerySuggestions />
</template>

<script>
import { QuerySuggestions } from "@empathy/x-components/query-suggestions";
import { SearchInput } from "@empathy/x-components/search-box";

export default {
  name: "QuerySuggestionsDemo",
  components: {
    QuerySuggestions,
    SearchInput
  }
};
</script>

### Play with props

In this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the matching query suggestions are shuffled with a slight delay as more letters of the term are typed.

_Type “puzzle” or another toy in the input field to try it out!_

<template>
  <SearchInput />
  <QuerySuggestions :animation="StaggeredFadeAndSlide" />
</template>

<script>
import { QuerySuggestions } from "@empathy/x-components/query-suggestions";
import { SearchInput } from "@empathy/x-components/search-box";
import { StaggeredFadeAndSlide } from "@empathy/x-components";

export default {
  name: "QuerySuggestionsDemo",
  components: {
    QuerySuggestions,
    SearchInput,
    StaggeredFadeAndSlide
  }
};
</script>

### Play with suggestion slot

Here, the `suggestion` binding property passes the suggestion data.

_Type “puzzle” or another toy in the input field to try it out!_

<template>
  <SearchInput />
  <QuerySuggestions #suggestion="{ suggestion }">
    <QuerySuggestion :suggestion="suggestion" #default="{ queryHTML }">
      <span v-html="queryHTML" />
    </QuerySuggestion>
  </QuerySuggestions>
</template>

<script>
import {
  QuerySuggestion,
  QuerySuggestions
} from "@empathy/x-components/query-suggestions";

export default {
  name: "QuerySuggestionsDemo",
  components: {
    QuerySuggestion,
    QuerySuggestions
  }
};
</script>

<!--prettier-ignore-start-->
::: warning
If you're not implementing the [`QuerySuggestion`](./query-suggestion.md) component, then you must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in `QuerySuggestions`.

<template>
  <QuerySuggestions #suggestion="{ suggestion }">
    <button
      @click="
        ($event, suggestion) => {
          this.$x.emit('UserAcceptedAQuery', suggestion.query, {
            target: $event.target
          });
          this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {
            target: $event.target
          });
        }
      "
    >
      {{ suggestion.query }}
    </button>
  </QuerySuggestions>
</template>

<script>
import { QuerySuggestions } from "@empathy/x-components/query-suggestions";

export default {
  name: "QuerySuggestionsDemo",
  components: {
    QuerySuggestions
  }
};
</script>

:::
<!--prettier-ignore-end-->

### Play with suggestion-content slot

In this example, the `suggestion` and `queryHTML` bindings have been passed in the `suggestion-content` slot to paint the resulting query suggestions in blue.

[//]: # 'ORIGINAL: the `suggestion` binding property passes the query suggestion data, the `queryHTML` property passes the matching query expressed in an HTML span tag. '

_Type “puzzle” or another toy in the input field to try it out!_

<template>
  <SearchInput />
  <QuerySuggestions #suggestion-content="{ suggestion, queryHTML }">
    <span
      :aria-label="`Select ${suggestion.query}`"
      style="color: blue;"
      v-html="queryHTML"
    />
  </QuerySuggestions>
</template>

<script>
import { QuerySuggestions } from "@empathy/x-components/query-suggestions";
import { SearchInput } from "@empathy/x-components/search-box";

export default {
  name: "QuerySuggestionsDemo",
  components: {
    SearchInput,
    QuerySuggestions
  }
};
</script>

## Extending the component

Components can be combined and communicate with each other. Commonly, the `QuerySuggestions` component communicates with the [`SearchInput`](../search-box/search-input.md), updating the term in the search input.

_Type “puzzle” or another toy in the input field to try it out!_

<template>
  <SearchInput />
  <QuerySuggestions />
</template>

<script>
import { QuerySuggestions } from "@empathy/x-components/query-suggestions";
import { SearchInput } from "@empathy/x-components/search-box";

export default {
  name: "QuerySuggestionsDemo",
  components: {
    SearchInput,
    QuerySuggestions
  }
};
</script>