--- 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 () => ; ```