# react-auto-complete

**Repository Path**: chenc041/react-auto-complete

## Basic Information

- **Project Name**: react-auto-complete
- **Description**: 基于 react 的 auto complete 组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-01-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简易的 基于react auto complete 组件

> react 全家桶

#### 属性
<table>
    <tr>
        <td>属性</td>
        <td>说明</td>
        <td>默认值</td>
    </tr>
    <tr>
        <td>list</td>
        <td>自动完成的数据源</td>
        <td>array</td>
    </tr>
</table>

#### 事件
<table>
    <tr>
        <td>属性</td>
        <td>说明</td>
        <td>参数</td>
    </tr>
    <tr>
        <td>getSelect</td>
        <td>获取选中的值</td>
        <td>value</td>
    </tr>
    <tr>
        <td>getInput</td>
        <td>获取输入框的值</td>
        <td>value</td>
    </tr>
</table>

### 自定义 选项
```
<AutoComplete
    getSelect={this.handelSelectValue.bind(this)}
    getInput={this.handleInputValue.bind(this)}>
    <div className='Tips'>
        <ul>
        {this.state.list.map((list, index) => 
            <li
            onClick={this.handelSelectValue.bind(this, list)}
            key={index}>
            {list}
            </li>
        )}
        </ul>
    </div>
</AutoComplete>
```

> demo gif

![Alt text](/screenshot/demo.gif)

```
安装依赖
npm i or yarn

开始运行
npm run dev or yarn start
```