Data and Value Binding

The AutoComplete enables you to configure its predefined list of options and selected value.

To set the predefined option list, use the data property. To set the selected value, use the value property.

Data Binding

To bind the AutoComplete to data, use the data property of the component.

The data property accepts both:

Arrays of Primitive Values

The following example demonstrates how to bind the AutoComplete to an array of primitive values.

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

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

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

    onChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <div className="example-wrapper">
                <AutoComplete
                    data={this.data}
                    value={this.state.value}
                    onChange={this.onChange}
                    placeholder="e.g. Andorra"
                />
            </div>
        );
    }
}

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

Datasets of Objects

If the AutoComplete is bound to a dataset of objects, use the textField property to specify the text of the data objects.

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

class AppComponent extends React.Component {
    countries = [
        { text: "Albania", id: "Alb" },
        { text: "Andorra", id: "And" },
        { text: "Armenia", id: "Arm" },
        { text: "Austria", id: "Aus" },
        { text: "Azerbaijan", id: "Aze" }
    ];
    state = { value: '' };

    onChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <AutoComplete
                data={this.countries}
                textField="text"
                value={this.state.value}
                onChange={this.onChange}
            />
        );
    }
}

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

Value Binding

To render the selected value, use the value property of the AutoComplete. If you set the value through the value property, hook up to the onChange event and manually update the value of the value property.

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

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

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

    handleChange = (event) => {
        this.setState({
            value: event.target.value
        });
    }

    render() {
        return (
            <AutoComplete
                data={this.data}
                onChange={this.handleChange}
                value={this.state.value}
                placeholder="e.g. Andorra"
            />
        );
    }
}

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