Suggestions

The AutoComplete provides suggestions that appear while the user types in its input field.

To turn them on, set the suggest property to true. Whenever the user modifies the input value, the AutoComplete automatically completes the user input with the first text match. If the first text match does not begin with the current user input, the AutoComplete does not display any suggestions.

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 {
    state = { value: '', suggest: '' };

    handleChange = (event) => {
        this.setState({
            value: event.target.value,
            suggest: event.suggestion ? event.suggestion.value : ''
        });
    }

    render() {
        return (
            <div className="example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>AutoComplete in Uncontrolled Mode</p>
                    <AutoComplete
                        data={countries}
                        suggest={true}
                        placeholder="e.g. Austria"
                    />
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>AutoComplete in Controlled Mode</p>
                    <AutoComplete
                        data={countries}
                        suggest={this.state.suggest}
                        placeholder="e.g. Austria"
                        value={this.state.value}
                        onChange={this.handleChange}
                    />
                </div>
            </div>
        );
    }
}

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