const { searchData, searching, searchValue } = this.state;
<Select
mode="combobox"
value={searchValue}
placeholder=""
notFoundContent={searching ? <Spin size="small" /> : null}
filterOption={false}
onChange={this.onSearchValueChangeHandler}
onSearch={this.onSearchHandler}
>
{searchData.map(d => <Option key={d.value}>{d.label}</Option>)}
</Select>
onSearchHandler(value) {
this.setState({ searchData: [], searching: true });
setTimeout(() => {
const results = [
{ value: "aaa", label: "" },
{ value: "bbb", label: "" },
{ value: "ccc", label: "" },
];
const data = results.map(item => ({ value: item.value, label: item.label }));
this.setState({ searchData: data, searching: false });
}, 500);
}
onSearchValueChangeHandler(value) {
this.setState({
searchValue: value,
searchData: [],
searching: false,
});
}
above is a snippet of remote data access using Select"s onSearch interface. Now you may find a bug, when mode="combobox", the drop-down selection will only show the value value, but when the mode="multiple", will display the label value normally
""