All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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 widget.

Basic Usage

The following example demonstrates the AutoComplete in action.

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

Events

The following example demonstrates basic AutoComplete events. You can subscribe to all AutoComplete events by the handler name.

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')
);
In this article