---

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>
```