Add select users demo, close #2765

components/select/demo/select-users.md

@@ -0,0 +1,79 @@
+---
+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.Option;
+
+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({ 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,
+          fetching: false,
+        }));
+        this.setState({ data });
+      });
+  }
+  handleChange = (value) => {
+    this.setState({
+      value,
+      data: [],
+      fetching: false,
+    });
+  }
+  render() {
+    const { fetching, data, value } = this.state;
+    return (
+      <Select
+        multiple
+        labelInValue
+        value={value}
+        placeholder="Select users"
+        notFoundContent={fetching ? <Spin size="small" /> : null}
+        filterOption={false}
+        onSearch={this.fetchUser}
+        onChange={this.handleChange}
+        style={{ width: '100%' }}
+      >
+        {data.map(d => <Option key={d.value}>{d.text}</Option>)}
+      </Select>
+    );
+  }
+}
+
+ReactDOM.render(<UserRemoteSelect />, mountNode);
+````