---
# System prepended metadata

title: IdentifierResults
tags: [UI reference]

---

---
title: IdentifierResults
tags: UI reference
---

# IdentifierResults

This component renders the list of results that match the current query stored in the state. Each identifier result must be represented by an `IdentifierResult`, in addition to any other component.

IMPORTANT: The SKU Search service must be implemented.

## Props

| Name   | Description                                                              | Type  | Default |
| ----------- | ------------------------------------------------------------------- | ----- | ------- |
| `animation` | Animation component that is used to animate the identifier results | `Vue` | `'ul'`  |

## Methods

None

## Slots

| Name | Description                  | Bindings <br/> (name - type - description)             |
| --------- | ----------------------- | ------------------------------------------------------ |
| `default`   | _Required_. Identifier result item content | **identifierResult** - `Result` Identifier Result data |

## Events

None

## See it in action

::: warning Backend service required
To use this component, the <b>SKU Search</b> service must be implemented.
:::

::: warning X&nbsp;Plugin customization
To trigger the search of results by ID, the component uses a <b>regular expression to check if the query adheres to the product reference code</b>.
If the product reference code <b><i>does not follow</i></b> the default behaviour, you need to overwrite this behaviour in the X&nbsp;Plugin:

```typescript
const xModules: XModulesOptions = {
  identifierResults: {
    config: {
      identifierDetectionRegexp: '^[a-zA-Z][0-9]+'
    }
  }
}
Vue.use(xPlugin, { xModules })
```

:::

::: warning Search adapter customization
Make sure that your API's <b>results data model has the product ID in the `identifier` field</b>.
If it <i>does not have</i> the product ID in the `identifier` field, in the [Search Adapter](../../build-search-ui/interface-x-integration-guide.md#_2-initialise-the-x-plugin) you must map your data model to the data model of the X&nbsp;Components:

```typescript
const adapter = new EmpathyAdapterBuilder()
  .addMapper((_, result: Result) => {
    result.identifier.value = result.id
    return result
  }, 'results')
  .build()
```

:::

This example displays the products whose product ID matches the reference entered in the search input as text.

_Start typing the product ID “a0213531” in the search input and see how the list of results is updated as you type the query._

```vue live
<SearchInput></SearchInput>
<IdentifierResults
  #default="{ identifierResult }"
>{{identifierResult.name}}</IdentifierResults>
```

### Play with props

This example displays the products containing the product ID as text. However, in this case, an animation has been added to how the identifier results are updated with new results when the query is changed.

_Start typing the product ID “a0213531” in the search input and see how each result is displayed with an animation._

```vue live
<SearchInput></SearchInput>
<IdentifierResults
  :animation="'fadeAndSlide'"
  #default="{ identifierResult }"
>{{identifierResult.name}}</IdentifierResults>
```

### Play with default slot

The default slot of `IdentifierResults` is used in this case to display the results found as images.

_Start typing the product ID “a0213531” in the search input and see the images of the products that match that string._

```vue live
<SearchInput></SearchInput>
<IdentifierResults #default="{ identifierResult }">
    <BaseResultImage :result="identifierResult"/>
</IdentifierResults>
```

### Extending the component

This example shows how `IdentifierResults` is commonly implemented. `BaseResultLink` is used as a wrapper and the default slot is filled with the `IdentifierResult` component. This way, the identifier is displayed next to the clickable product name, allowing users to compare it with the query. Here, the part of the identifier that matches the query is highlighted in bold.

_Start typing the product ID “a0213531” in the search input and see how the product ID part that matches the query is highlighted._

```vue live
<SearchInput></SearchInput>
<IdentifierResults #default="{ identifierResult }">
    <IdentifierResult :result="identifierResult"/>
     -  
    <BaseResultLink :result="identifierResult" #default="{ result }">{{result.name}}</BaseResultLink>
</IdentifierResults>
```
