---
order: 9
title:
zh-CN: 搜索框
en-US: Search Box
---
## zh-CN
搜索和远程数据结合。
## en-US
Search with remote data.
```jsx
import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import qs from 'qs';
const { Option } = Select;
let timeout;
let currentValue;
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const str = qs.stringify({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then(d => {
if (currentValue === value) {
const { result } = d;
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 => {
if (value) {
fetch(value, data => this.setState({ data }));
} else {
this.setState({ data: [] });
}
};
handleChange = value => {
this.setState({ value });
};
render() {
const options = this.state.data.map(d => );
return (
);
}
}
export default () => ;
```