mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-10 07:59:49 +08:00
1.8 KiB
1.8 KiB
order | title | ||||
---|---|---|---|---|---|
9 |
|
zh-CN
搜索和远程数据结合。
en-US
Search with remote data.
import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
const Option = Select.Option;
let timeout;
let currentValue;
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then((d) => {
if (currentValue === value) {
const result = d.result;
const data = [];
result.forEach((r) => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
}
timeout = setTimeout(fake, 300);
}
class SearchInput extends React.Component {
state = {
data: [],
value: undefined,
}
handleSearch = (value) => {
fetch(value, data => this.setState({ data }));
}
handleChange = (value) => {
this.setState({ value });
}
render() {
const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
return (
<Select
showSearch
value={this.state.value}
placeholder={this.props.placeholder}
style={this.props.style}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={this.handleSearch}
onChange={this.handleChange}
notFoundContent={null}
>
{options}
</Select>
);
}
}
ReactDOM.render(
<SearchInput placeholder="input search text" style={{ width: 200 }} />,
mountNode
);