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

Kendo UI DropDowns wrapper for React

---
title: Overview
page_title: Overview - AutoComplete - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI AutoComplete delivers and use the wrapper in React projects."
slug: overview_autocomplete
position: 1
---

# AutoComplete Overview

The AutoComplete provides suggestions depending on the typed text.

It is a richer version of the `<input>` element and provides suggestions depending on the typed text.

The AutoComplete wrapper for React is a client-side wrapper for the [Kendo UI AutoComplete](http://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete) widget.

## Basic Usage

The following example demonstrates the AutoComplete in action.

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

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

## Features and Functionalities

* [Data binding]({% slug databinding_autocomplete %})
* [Templates]({% slug templates_autocomplete %})
* [Grouping]({% slug grouping_autocomplete %})
* [Virtualization]({% slug virtualization_autocomplete %})

## Events

The following example demonstrates basic AutoComplete events. You can subscribe to [all AutoComplete events](https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#events) by the handler name.

```jsx
class AutoCompleteContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new kendo.data.DataSource({
            data: props.data
        })
        this.onChange = this.onChange.bind(this);
        this.onOpen = this.onOpen.bind(this);
        this.onFilter = this.onFilter.bind(this);
        this.onClose = this.onClose.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.onDataBound = this.onDataBound.bind(this);
    }

    onChange = (e) => {
         console.log("event :: change");
    }

    onOpen = (e) => {
        console.log("event :: open");
    }

    onClose = (e) => {
        console.log("event :: close");
    }

    onSelect= (e) => {
        var dataItem = e.dataItem;
        console.log("event :: select (" + dataItem + ")" );
    }

    onDataBound = (e) => {
        console.log("event :: dataBound");
    }

    onFilter = (e) => {
        console.log("event :: filter");
    };

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <AutoComplete
                        change={this.onChange}
                        open={this.onOpen}
                        filtering={this.onFilter}
                        close={this.onClose}
                        select={this.onSelect}
                        dataBound={this.onDataBound}
                        dataSource={this.dataSource}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <AutoCompleteContainer data={["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"]}/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [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)