---

title: ResultsList

---

# 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           |
| ---------------------- | ------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code> | Animation component that will be used to animate the results. | <code>AnimationProp</code> | <code>'ul'</code> |

## Events

| Event name                | Properties | Description |
| ------------------------- | ---------- | ----------- |
| UserReachedResultsListEnd |            |

## Events

This component doesn't emit events.

## See it in action

<!-- prettier-ignore-start -->
:::warning Backend service required
To use this component, the Search service must be implemented.
:::
<!-- prettier-ignore-end -->

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

_Type any term in the input field to try it out!_

```vue
<template>
  <div>
    <SearchInput />
    <ResultsList />
  </div>
</template>

<script setup>
import { ResultsList } from "@empathyco/x-components/search";
import { SearchInput } from "@empathyco/x-components/search-box";
</script>
```

### Play with the animation

```vue
<template>
  <div>
    <SearchInput />
    <ResultsList :animation="fadeAndSlide" />
  </div>
</template>

<script setup>
import { ResultsList } from "@empathyco/x-components/search";
import { SearchInput } from "@empathyco/x-components/search-box";
import { FadeAndSlide } from "@empathyco/x-components/animations";

const fadeAndSlide = FadeAndSlide;
</script>
```

### Overriding default content

```vue
<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 setup>
import { ResultsList } from "@empathyco/x-components/search";
import { SearchInput } from "@empathyco/x-components/search-box";
import { BaseGrid } from "@empathyco/x-components";
</script>
```

### Overriding result content

```vue
<template>
  <div>
    <SearchInput />
    <ResultsList #result="{ item }">
      <span class="result">
        {{ item.name }}
      </span>
    </ResultsList>
  </div>
</template>

<script setup>
import { SearchInput } from "@empathyco/x-components/search-box";
import { ResultsList } from "@empathyco/x-components/search";
</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.

```vue
<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 setup>
import {
  ResultsList,
  BannersList,
  PromotedsList,
} from "@empathyco/x-components/search";
import { SearchInput } from "@empathyco/x-components/search-box";
</script>
```