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
suggestions	The list of suggestions to render.	Array
animation	Animation component that will be used to animate the suggestion.	union	'ul'
maxItemsToRender	Number of suggestions to be rendered.	number
showFacets	Boolean value to indicate if the facets should be rendered.	boolean	false
showPlainSuggestion	When BaseSuggestions.showFacets is true, it indicates if the suggestion without filter should be rendered.	boolean	false

Slots

Name	Description	Bindings (name - type - description)
default	(Required) List item content	suggestion Suggestion - Suggestion data index number - Suggestion index filter Filter | undefined - 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.

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

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!

<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

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

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