Как отфильтровать значения для автозаполнения Ant Design?

Question

У меня есть следующий обработчик для автозаполнения Ant Design, но, хотя состояние задано правильно в React, автозаполнение отображает дополнительные значения вместо только отфильтрованных.

handleSearch(value) {
        api.getUsers()
        .then(users => users.map(p => p.userName.trim()))
        .then(users => users.filter(name => name.startsWith(value)))
        .then(function (names) {
            console.log(names);
            this.setState(function () {
                return {
                    dataSource: !names ? [] : names
                }
            })
        }
            .bind(this));
}

Автозаполнение:

render() {
    const {dataSource} = this.state;
    return (
        <div>
            <div><h1>User Search</h1></div>


            Username :
            <AutoComplete
                dataSource={dataSource}
                style={{width: 200}}
                onSelect={onSelect}
                onSearch={this.handleSearch}
                placeholder="input here"
            />
        </div>
    );
}

Answer 1

У меня была такая же проблема при использовании асинхронного поиска на стороне сервера для предоставления результатов автозаполнения. Если dataSource обновляется после изменения ввода, автозаполнение не будет обновлять меню, поскольку оно не видит необходимости повторного отображения, так как ввод не был изменен.

Я работаю над этим, устанавливая реквизит состояния из onChange( value ) и явно устанавливая value Автозаполнения в этот реквизит состояния. Это приводит к обновлению раскрывающегося списка результатов.