---
# System prepended metadata

title: QuerySuggestion
tags: [UI reference]

---

---
title: QuerySuggestion
tags: UI reference
---

# QuerySuggestion

This component renders a suggestion for a query. 

[//]: # ( 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 |
| ------------ | ------------------------ | ------------ | ------- |
| `suggestion` | The suggestion to render. | `Suggestion` |     |

## Slots

| Name      | Description                         | Bindings  </br> (name - type - description)                                                                                                                            |
| --------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `default` | The content of the query suggestion | **suggestion** - `suggestion` - Query suggestion data <br/> **queryHTML** - `string` - Query suggestion data wrapped in an HTML span tag |

## Events

This component emits the following events:

- `UserSelectedAQuerySuggestion` 

## See it in action

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

Here you can see how a single query suggestion is rendered using the `suggestion` prop.

```vue
<template>
  <QuerySuggestion :suggestion="{ query: `QuerySuggestion` }" />
</template>

<script>
import { QuerySuggestion } from "@empathy/x-components/query-suggestions";
export default {
  name: "QuerySuggestionDemo",
  components: {
    QuerySuggestion
  }
};
</script>
```

### Play with default slot

In this example, the query suggestion is painted in blue by passing a color style in the HTML span element.

```vue
<template>
  <QuerySuggestion
    :suggestion="{ query: `QuerySuggestion` }"
    #default="{ queryHTML }"
  >
    <span v-html="queryHTML" style="color: blue;" />
  </QuerySuggestion>
</template>

<script>
import { QuerySuggestion } from "@empathy/x-components/query-suggestions";
export default {
  name: "QuerySuggestionDemo",
  components: {
    QuerySuggestion
  }
};
</script>
```

### Play with events

In this example, when you click on the query suggestion, a message is displayed to illustrate that the `UserSelectedAQuerySuggestion` event has been triggered.

```vue
<template>
  <QuerySuggestion
    :suggestion="{ query: `QuerySuggestion` }"
    @UserSelectedAQuerySuggestion="payload => (message = payload.query)"
  ></QuerySuggestion>
</template>

<script>
import { QuerySuggestion } from "@empathy/x-components/query-suggestions";
export default {
  name: "QuerySuggestionDemo",
  components: {
    QuerySuggestion
  }
};
</script>
```
