---

title: BaseSuggestions

---

# BaseSuggestions

Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
in the default slot for working.

## Props

| Name                             | Description                                                                                                                               | Type                       | Default            |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------ |
| <code>suggestions</code>         | The list of suggestions to render.                                                                                                        | <code>Suggestion[]</code>  | <code></code>      |
| <code>animation</code>           | Animation component that will be used to animate the suggestion.                                                                          | <code>AnimationProp</code> | <code>'ul'</code>  |
| <code>maxItemsToRender</code>    | Number of suggestions to be rendered.                                                                                                     | <code>number</code>        | <code></code>      |
| <code>showFacets</code>          | Boolean value to indicate if the facets should be rendered.                                                                               | <code>boolean</code>       | <code>false</code> |
| <code>showPlainSuggestion</code> | When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without<br />filter should be rendered. | <code>boolean</code>       | <code>false</code> |
| <code>suggestionItemClass</code> | Class inherited by content element.                                                                                                       | <code>string</code>        | <code></code>      |

## Slots

| Name                 | Description                  | Bindings<br />(name - type - description)                                                                                                                                             |
| -------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | (Required) List item content | **suggestion** <code>Suggestion</code> - Suggestion data<br />**index** <code>number</code> - Suggestion index<br />**filter** <code>Filter \| undefined</code> - Suggestion's filter |

## Examples

For this component to work, you will need to set a list of suggestions as prop, and also to
implement the component for single suggestion, which handles the click event. In the following
example, the suggestions are retrieved from a property called `suggestions`, and the implementation
of the suggestion component is a simple `button`, that calls the `emitSuggestionSelected` method
when clicked.

```vue
<template>
  <BaseSuggestions :suggestions="suggestions">
    <template #default="{ suggestion }">
      <button @click="emitSuggestionSelected($event, suggestion)">
        {{ suggestion.query }}
      </button>
    </template>
  </BaseSuggestions>
</template>

<script setup>
import { ref } from "vue";
import { BaseSuggestions } from "@empathyco/x-components";
import { use$x } from "../../composables";

const x = use$x();
const suggestions = ref([
  {
    query: "Chips",
    facets: [],
    key: "chips",
    totalResults: 10,
    results: [],
    modelName: "PopularSearch",
  },
  {
    query: "Puzzle",
    facets: [],
    key: "puzzle",
    totalResults: 5,
    results: [],
    modelName: "PopularSearch",
  },
]);
function emitSuggestionSelected(event, suggestion) {
  x.emit("UserAcceptedAQuery", suggestion.query, { target: event.target });
  x.emit("UserSelectedAQuerySuggestion", suggestion, { target: event.target });
}
</script>
```

### Play with props

In this example, the suggestions has been limited to render a maximum of 3 items. _Type "puzzle" or
another toy in the input field to try it out!_

```vue
<template>
  <BaseSuggestions :suggestions="suggestions" :maxItemsToRender="3" />
</template>

<script setup>
import { BaseSuggestions } from "@empathyco/x-components";
const suggestions = [
  {
    facets: [],
    key: "chips",
    query: "Chips",
    totalResults: 10,
    results: [],
    modelName: "PopularSearch",
  },
  {
    facets: [],
    key: "puzzle",
    query: "Puzzle",
    totalResults: 5,
    results: [],
    modelName: "PopularSearch",
  },
  {
    facets: [],
    key: "lego",
    query: "Lego",
    totalResults: 8,
    results: [],
    modelName: "PopularSearch",
  },
  {
    facets: [],
    key: "car",
    query: "Car",
    totalResults: 3,
    results: [],
    modelName: "PopularSearch",
  },
];
</script>
```

In this example, the filters of the suggestion will be rendered along with the query.

The `showPlainSuggestion` prop can be used to indicate if the suggestion without filter must be
rendered along with the suggestion with filters.

This will render:

- Chips //If `showPlainSuggestion` is true
- Chips EXAMPLE

```vue
<template>
  <BaseSuggestions :suggestions="suggestions" showFacets showPlainSuggestion />
</template>

<script setup>
import { BaseSuggestions } from "@empathyco/x-components";
const suggestions = [
  {
    facets: [
      {
        id: "exampleFacet",
        label: "exampleFacet",
        modelName: "SimpleFacet",
        filters: [
          {
            facetId: "exampleFacet",
            id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:"EXAMPLE"',
            label: "EXAMPLE",
            selected: false,
            totalResults: 10,
            modelName: "SimpleFilter",
          },
        ],
      },
    ],
    key: "chips",
    query: "Chips",
    totalResults: 10,
    results: [],
    modelName: "PopularSearch",
  },
];
</script>
```

In this example, the `suggestionItemClass` prop can be used to add classes to the suggestion item.

```vue
<template>
  <BaseSuggestions
    :suggestions="suggestions"
    suggestionItemClass="x-custom-class"
  />
</template>

<script setup>
import { BaseSuggestions } from "@empathyco/x-components";
const suggestions = [
  {
    facets: [],
    key: "chips",
    query: "Chips",
    totalResults: 10,
    results: [],
    modelName: "PopularSearch",
  },
];
</script>
```