No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
demo
dist
docs
src
test
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
HISTORY.md
README.md
README_EN.md
index.html
package.json

README.md

bee-auto-complete

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

react bee-auto-complete component for tinper-bee

根据用户的输入,进行自动匹配显示列表,用户可以进行按需选择自己需要的内容在输入框展示

使用方法

class Demo1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "",
            options: ['10000(博宇)', '10001(波波)', '10002(李刚)'],
            placeholder: "查找关键字,请输入1",
            disabled: false
        }
        this.onFormChange = this.onFormChange.bind(this);
    }
    onFormChange(value) {
        this.setState({
            value: value
        })

    }
    render() {
        let { value, options, placeholder,disabled} = this.state;
        return (
            <div className="demo" style={{ "marginBottom": "90px" }}>
                <AutoComplete
                    value={value}
                    disabled={disabled}
                    options={options}
                    placeholder={placeholder}
                    onValueChange={value => this.onFormChange(value)}
                />

            </div>
        )
    }
}

API

参数 说明 类型 默认值
value 传入的输入框的值 any -
options 自动匹配列表 array []
placeholder 输入框的默认提示 string -
show 控制自动匹配列表的展开和隐藏 boolean false
onChange input 的 value 变化时,调用此函数 function -
onKeyDown 监听input的键盘事件,调用此函数 handleKeyDown() -
onBlur input 的失去焦点时,调用此函数 function -

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-auto-complete
$ cd bee-auto-complete
$ npm install
$ npm run dev