Filtering

The AutoComplete enables you to display only those suggestion list items which meet specified criteria.

Basic Configuration

On every user modification of the input value, the AutoComplete triggers an onChange event. The event argument contains the typed string value that you can use to filter the source.

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

const source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];

class AppComponent extends React.Component {
    state = { data: source, value: '' };

    onChange = (event) => {
        const value = event.target.value;

        this.setState({
            data: this.filterData(value),
            value: value
        });
    }

    filterData(value) {
        const data = source;
        const filter = {
            value: value,
            operator: 'startswith',
            ignoreCase: true
        };
        return value ? filterBy(data, filter) : data;
    }

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

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

To filter the data after a delay, use a similar implementation. You can toggle the loading property and provide the user with a visual indication of the filtering process.

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

const source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];
const delay = 500;

class AppComponent extends React.Component {
    state = {
        data: source,
        value: '',
        loading: false
    };

    onChange = (event) => {
        const value = event.target.value;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            this.setState({
                data: this.filterData(value),
                loading: false
            });
        }, delay);

        this.setState({
            value: value,
            loading: true
        });
    }

    filterData(value) {
        const data = source;
        const filter = {
            value: value,
            operator: 'startswith',
            ignoreCase: true
        };
        return filterBy(data, filter);
    }

    render() {
        return (
            <AutoComplete
                data={this.state.data}
                value={this.state.value}
                onChange={this.onChange}
                loading={this.state.loading}
            />
        );
    }
}

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

Minimum Filter Length

The following example demonstrates how to update the data and open the drop-down list of the AutoComplete only after typing a minimum number of characters.

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

const source = [ "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan" ];

class AppComponent extends React.Component {
    state = {
        data: source,
        value: '',
        opened: false
    };

    onChange = (event) => {
        const value = event.target.value;
        const stateData = value.length < 3 ?
            { data: source, opened: false } :
            { data: this.filterData(value), opened: true };

        const eventType = event.nativeEvent.type;
        const valueSelected = eventType === 'click' ||
            (eventType === 'keydown' && event.nativeEvent.keyCode === 13);

        if (valueSelected && stateData.data.includes(value)) {
            stateData.opened = false;
        }

        this.setState({
            value: value,
            ...stateData
        });
    }

    filterData(value) {
        const data = source;
        const filter = {
            value: value,
            operator: 'startswith',
            ignoreCase: true
        };
        return filterBy(data, filter);
    }

    render() {
        return (
            <AutoComplete
                data={this.state.data}
                value={this.state.value}
                onChange={this.onChange}
                opened={this.state.opened}
            />
        );
    }
}

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