> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/bootstrap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/bootstrap/search-list/data-binding.md).

# Data Binding

The [data map](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data#datamap) for the Bootstrap select list component is listed below.  The component expects these field names in its `data` configuration.

## Properties

| Name  | Description                                                          |
| ----- | -------------------------------------------------------------------- |
| id    | The field in the data to be used as the unique id for list items     |
| label | The field in the data to be used as the display label for list items |

```javascript
const users = [
    { id: "bsimmons", label: "Ben Simmons" },
    { id: "jembiid", label: "Joel Embiid" }
]

const search = new wire.bsSearchList().render("#search", {
    data: users
});
```

## Datamap

Use the `datamap` configuration property to bind a data structure to the component that does not have the same field names.

```javascript
const users = [
    { user: "bsimmons", name: "Ben Simmons" },
    { user: "jembiid", name: "Joel Embiid" },
]

const search = new wire.bsSearchList().render("#search", {
    data: users,
    datamap: { id: "user", label: "name" }
});
```