Dropdowns / AutoComplete / Getting Started
material theme

Getting Started with KendoReact AutoComplete

The KendoReact AutoComplete is a form component that provides suggestions depending on the typed text and is a richer version of the <input> element and supports data binding, filtering, and custom rendering.

The KendoReact AutoComplete component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dropdowns package.

Basic Usage

The following example demonstrates the AutoComplete in action.

import React from 'react';
import ReactDOM from 'react-dom';

import { AutoComplete } from '@progress/kendo-react-dropdowns';
import countries from './countries';

class AppComponent extends React.Component {
    render() {
        return (
            <div className="example-wrapper">
                <p>Type the name of a European country:</p>
                <AutoComplete data={countries} placeholder="e.g. Denmark" />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Functionality and Features

Events

The following example demonstrates basic AutoComplete events.

import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];
    state = { events: [] };

    onOpen = () => { this.log('open'); }
    onClose = () => { this.log('close'); }
    onFocus = () => { this.log('focus'); }
    onBlur = () => { this.log('blur'); }
    onChange = (event) => { this.log('change', event.target.value); }

    render() {
        return (
            <div>
                <AutoComplete
                    data={this.source}
                    onOpen={this.onOpen}
                    onClose={this.onClose}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onChange={this.onChange}
                />
                <br />
                <br />
                <EventsLogger events={this.state.events} />
            </div>
        );
    }

    log(event, arg) {
        const events = this.state.events;
        events.unshift(`${event} ${arg || ""}`);

        this.setState({
            events: events
        });
    }
}

class EventsLogger extends React.Component {
    render() {
        return (
            <div className="example-config">
                <h5>Event log</h5>
                <ul className="event-log" style={{ textAlign: 'right' }}>
                    {this.props.events.map(function(event, index) {
                        return (<li key={index}>{event}</li>);
                    })}
                </ul>
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /