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 is distributed through NPM under the kendo-react-dropdowns package.

The AutoComplete component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

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')
);