ResultsList

It renders a ItemsList list with the results from SearchState.results by default.

The component provides a default slot which wraps the whole component with the results bound.

It also provides the slot result to customize the item, which is within the default slot, with the result bound.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the results.	union	'ul'

Slots

Name	Description	Bindings (name - type - description)
default	Customize ResultsList.	items Result[] - Results to render. animation Vue | string - Animation to animate the elements.
slotName

Events

This component doesn't emit events.

See it in action

Backend service required

To use this component, the Search service must be implemented.

Here you have a basic example of how the ResultsList is rendered.

Type any term in the input field to try it out!

<template>
  <div>
    <SearchInput />
    <ResultsList />
  </div>
</template>
<script>
  import { ResultsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  export default {
    name: 'ResultsListDemo',
    components: {
      SearchInput,
      ResultsList
    }
  };
</script>

Play with the animation

<template>
  <div>
    <SearchInput />
    <ResultsList :animation="fadeAndSlide" />
  </div>
</template>
<script>
  import { ResultsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  import { FadeAndSlide } from '@empathyco/x-components/animations';
  export default {
    name: 'ResultsListDemo',
    components: {
      SearchInput,
      ResultsList
    },
    data() {
      return {
        fadeAndSlide: FadeAndSlide
      };
    }
  };
</script>

Overriding default content

<template>
  <div>
    <SearchInput />
    <ResultsList #default="{ items, animation }">
      <BaseGrid :items="items" :animation="animation">
        <template #result="{ item }">
          <span>Result: {{ item.name }}</span>
        </template>
        <template #default="{ item }">
          <span>Default: {{ item }}</span>
        </template>
      </BaseGrid>
    </ResultsList>
  </div>
</template>
<script>
  import { ResultsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  import { BaseGrid } from '@empathyco/x-components';
  export default {
    name: 'ResultsListDemo',
    components: {
      SearchInput,
      ResultsList,
      BaseGrid
    }
  };
</script>

Overriding result content

<template>
  <div>
    <SearchInput />
    <ResultsList #result="{ item }">
      <span class="result">
        {{ item.name }}
      </span>
    </ResultsList>
  </div>
</template>
<script>
  import { SearchInput, ResultsList } from '@empathyco/x-components/search';
  export default {
    name: 'ResultsListDemo',
    components: {
      SearchInput,
      ResultsList
    }
  };
</script>

Data injection

Starting with the ResultsList component as root element, you can concat the list of list items using BannersList, PromotedsList, BaseGrid or any component that injects the listItems value.

The order in which elements are placed in the template will define the concat strategy of the items, so it is important to define it properly; for example, Promoteds will be usually before Banners so first promoted items are inserted within the results and then banner items are placed on top of that, occupying the rows.

<template>
  <div>
    <SearchInput />
    <ResultsList>
      <PromotedsList>
        <BannersList>
          <template #result="{ item }">Result: {{ item.id }}</template>
          <template #banner="{ item }">Banner: {{ item.id }}</template>
          <template #promoted="{ item }">Promoted: {{ item.id }}</template>
        </BannersList>
      </PromotedsList>
    </ResultsList>
  </div>
</template>
<script>
  import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  export default {
    name: 'ResultsListDemo',
    components: {
      SearchInput,
      ResultsList,
      BannersList,
      PromotedsList
    }
  };
</script>