cjd-parkball/src/components/select/demo/search-box.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
category: 2
title: 搜索框
title_en: Search Box
---

 zh-CN

搜索和远程数据结合。

 en-US

Search with remote data.

````jsx
import { Select } from 'parkball';
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);
````