---
order: 12
title:
zh-CN: 搜索用户
en-US: Search and Select Users
---
## zh-CN
一个带有远程搜索,防抖控制,请求时序控制,加载状态的多选示例。
## en-US
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
```jsx
import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';
const { Option } = Select;
class UserRemoteSelect extends React.Component {
constructor(props) {
super(props);
this.lastFetchId = 0;
this.fetchUser = debounce(this.fetchUser, 800);
}
state = {
data: [],
value: [],
fetching: false,
};
fetchUser = value => {
console.log('fetching user', value);
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({ data: [], fetching: true });
fetch('https://randomuser.me/api/?results=5')
.then(response => response.json())
.then(body => {
if (fetchId !== this.lastFetchId) {
// for fetch callback order
return;
}
const data = body.results.map(user => ({
text: `${user.name.first} ${user.name.last}`,
value: user.login.username,
}));
this.setState({ data, fetching: false });
});
};
handleChange = value => {
this.setState({
value,
data: [],
fetching: false,
});
};
render() {
const { fetching, data, value } = this.state;
return (
: null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{ width: '100%' }}
>
{data.map(d => (
))}
);
}
}
ReactDOM.render(, mountNode);
```