@progress/kendo-dropdowns-react-wrapper/docs/autocomplete/data-binding.md

Kendo UI DropDowns wrapper for React

---
title: Data Binding
page_title: Data Binding - AutoComplete - Kendo UI Wrappers for React
description: "Bind the Kendo UI AutoComplete wrapper to data in React projects."
slug: databinding_autocomplete
position: 2
---

# Data Binding

The AutoComplete enables you to bind it to a list of possible values.

To provide suggestions, bind the AutoComplete to either:
* [Local data arrays](#toc-binding-to-local-data-arrays), or
* [Remote data services](#toc-binding-to-remote-data-services).

Locally defined values are best for small, fixed sets of suggestions. For larger datasets, use remote suggestions. When you use the AutoComplete with the [Kendo UI Data Source component](http://docs.telerik.com/kendo-ui/framework/datasource/overview), you can push the filtering of large remote data services to the server as well, and as a result, the client-side performance maximizes.

## Binding to Local Data Arrays

To configure and provide the AutoComplete suggestions locally, bind the component to a local data array by using the `dataSource` property.

```jsx-preview
class AutoCompleteContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <AutoComplete dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <AutoCompleteContainer data={["Item 1","Item 2", "Item 3"]}/>,
    document.querySelector('my-app')
);
```

## Binding to Remote Data Services

To initialize the AutoComplete by binding it to a remote data service, use the [Data Source component](http://docs.telerik.com/kendo-ui/framework/datasource/overview). It is an abstraction for local and remote data. Remote data binding is appropriate for larger datasets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as [XML](http://en.wikipedia.org/wiki/XML), [JSON](http://en.wikipedia.org/wiki/JSON), and [JSONP](http://en.wikipedia.org/wiki/JSONP).

The following example demonstrates how to bind the AutoComplete to a remote data service through the Data Source component by using oData.

```jsx
class AutoCompleteContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            pageSize: 80
        })
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <AutoComplete dataSource={this.dataSource}
                                dataTextField={"ShipName"}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <AutoCompleteContainer/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI Data Source Component](http://docs.telerik.com/kendo-ui/framework/datasource/overview)
* [Kendo UI AutoComplete for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/autocomplete/overview)
* [API Reference of the AutoComplete Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete)