# AutoComplete 自动补全

根据输入内容，自动匹配剩余数据

## 使用场景

输入内容，自动补全剩余数据

## 案例演示

### 基本使用

---demo
```js
import { AutoComplete } from 'amos-framework';

const datas = ['test', 'apple', 'yellow', 'red', 'success'];

ReactDOM.render((
  <div>
    基本使用：<AutoComplete placeholder="输入关键词" source={datas} />
    <br />
    禁用状态：<AutoComplete placeholder="禁用" source={datas} disabled />
  </div>
), _react_runner_);
```
---demoend

### 事件控制

---demo
```js
import { AutoComplete, Button } from 'amos-framework';

const datas = ['test', 'apple', 'yellow', 'red', 'success'];
const datas2 = ['张三', '李四', '王五', '天天', '向上'];

class Demo extends Component {
  state = {
    value: '',
    flag: true,
    source: datas
  };

  onChange = (value) => {
    console.log(value);
    this.setState({
      value
    });
  }
  changeDatas = () => {
    this.setState((prevState) => {
      const nextFlag = !prevState.flag;
      return {
        flag: nextFlag,
        source: nextFlag ? datas : datas2
      };
    });
  }

  render(){
    const { value, source } = this.state;
    return (
      <div>
        <Button onClick={this.changeDatas}>改变原始数据</Button>
        <div />
        <AutoComplete placeholder="输入关键词" value={value} source={source} onChange={this.onChange} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 复杂数据格式

---demo
```js
import { AutoComplete } from 'amos-framework';

const datas = [
  { key: '1', label: 'test1', value: 'test1-1' },
  { key: '2', label: 'test2', value: 'test2-1' },
  { key: '3', label: 'test3', value: 'test3-1' },
  { key: '4', label: 'test4', value: 'test4-1' }
];

function onChange(value){
  console.log(value);
  const item = datas.find(d => d.label === value);
  console.log(item);
}

function dataFmt(list){
  return list.map(l => l.label);
}

ReactDOM.render((
  <div>
    <AutoComplete placeholder="输入关键词" source={dataFmt(datas)} onChange={onChange}/>
  </div>
), _react_runner_);
```
---demoend

## API

| params | type | default | description |
|------|------|------|-------|
| prefixCls | string | `amos-auto-complete` | 样式前缀 |
| className | string | - | 自定义样式名 |
| children | ReactNode | - | 自定义内容 |
| source | Array | - | 待搜索的数据源 |
| value | string | - | 输入框的值 |
| defaultValue | string | - | 初始化输入框的值 |
| onChange | Function | - | 输入改变、选择后的回调，参数为当前输入框的值 |
| size | string | - | 输入框大小，除默认外可选值：sm、lg |
| disabled | Boolean | - | 是否禁用 |
| placeholder | string | - | 同 input placeholder |