@empathyco/x-components/docs/API-reference/components/query-suggestions/x-components.query-suggestion.md

Empathy X Components

---

title: QuerySuggestion

---

# QuerySuggestion

This component renders a suggestion for a query. 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       |
| ----------------------- | ------------------------- | ----------------------- | ------------- |
| <code>suggestion</code> | The suggestion to render. | <code>Suggestion</code> | <code></code> |

## Slots

| Name                 | Description              | Bindings<br />(name - type - description)                                                                                                                                                                                                      |
| -------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| <code>default</code> | Query Suggestion content | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |

## Events

This component emits the following events:

- [`UserSelectedAQuerySuggestion`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the query suggestion
  data.

## See it in action

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

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

```vue live
<template>
  <QuerySuggestion :suggestion="suggestion" />
</template>

<script setup>
import { QuerySuggestion } from "@empathyco/x-components/query-suggestions";
import { ref } from "vue";
const suggestion = ref({
  modelName: "QuerySuggestion",
  query: "tshirt",
  facets: [],
});
</script>
```

### Play with default slot

In this example, we are adding an emoji next to the suggestion.

```vue live
<template>
  <QuerySuggestion :suggestion="suggestion" #default="{ suggestion }">
    <span>🔍</span>
    <span>{{ suggestion.query }}</span>
  </QuerySuggestion>
</template>

<script setup>
import { QuerySuggestion } from "@empathyco/x-components/query-suggestions";
import { ref } from "vue";
const suggestion = ref({
  modelName: "QuerySuggestion",
  query: "tshirt",
  facets: [],
});
</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 live
<template>
  <QuerySuggestion
    :suggestion="suggestion"
    @UserSelectedAQuerySuggestion="alertSuggestion"
  />
</template>

<script setup>
import { QuerySuggestion } from "@empathyco/x-components/query-suggestions";
import { ref } from "vue";
const suggestion = ref({
  modelName: "QuerySuggestion",
  query: "tshirt",
  facets: [],
});
function alertSuggestion(querySuggestion) {
  alert(`You have clicked the query suggestion: ${querySuggestion.query}`);
}
</script>
```