---

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
<BaseSuggestions :suggestions="suggestions">
  <template #default="{ suggestion }">
    <button @click="emitSuggestionSelected($event, suggestion)">
      {{ suggestion.query }}
    </button>
  </template>
</BaseSuggestions>
```

Following the previous example, the component options object could be something like this:

```js
export default {
  computed: {
    ...mapGetters(['x', 'querySuggestions'], { suggestions: 'suggestions' }),
  },
  methods: {
    emitSuggestionSelected(event, suggestion) {
      this.$x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })
      this.$x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })
    },
  },
}
```

### 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>
import { BaseSuggestions } from '@empathyco/x-components'

export default {
  name: 'BaseSuggestionsDemo',
  components: {
    BaseSuggestions,
  },
  data() {
    return {
      suggestions: [
        {
          facets: [],
          key: 'chips',
          query: 'Chips',
          totalResults: 10,
          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>
import { BaseSuggestions } from '@empathyco/x-components'

export default {
  name: 'BaseSuggestionsDemo',
  components: {
    BaseSuggestions,
  },
  data() {
    return {
      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 `contentClass` prop can be used to add classes to the suggestion item.

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

<script>
import { BaseSuggestions } from '@empathyco/x-components'

export default {
  name: 'BaseSuggestionsDemo',
  components: {
    BaseSuggestions,
  },
  data() {
    return {
      suggestions: [
        {
          facets: [],
          key: 'chips',
          query: 'Chips',
          totalResults: 10,
          results: [],
          modelName: 'PopularSearch',
        },
      ],
    }
  },
}
</script>
```