AutoComplete

参数

const options = {
    hidden: false,
    disabled: false,
    showCloseBtn: true,
    readOnly: false,
    required: true,
    isFetching: false,
    showText: '请输入正确信息',
    errorStatus: false, //是否报错
    errorMsg:"出错了~~~！", //报错信息
    helpMsg:"qdwdqwd",
    sideTip:false, //toolTip是否左右显示
    hiddenTip:false, //toolTip是否显示
    labelText: 'AutoComplete', //左侧 label 文字
    placeholder: '', // input placeholder
    inputDefaultValue: '', // input 默认值
    defaultItems: [], // autocomplete 数据 需传入一个DOM数组 nodeName为li
    "lablePos": true, //label位置，true时在左边，false在上边
    "lableTxt": false, //label中文字对齐方式，true左对齐，false右对齐
    isNeedResetValOnMouseUp: true, //是否需要在关闭时清除输入框内的数据，默认true
  customResultClassName:'', //搜索结果区域的自定义样式名称，默认''

    keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
    itemCallBack: (event, data) => console.log(event, data), // autocomplete 点击回调
    focusCallBack: (value) => console.log(value), // input keyup输入回调
    blurCallBack: (event) => console.log(event.target), // autocomplete 点击回调
    changeCallBack: (event,value) => {console.log(event, value)}, // input keyup输入回调
    keyUpCallBack: (event,value) => {console.log(event, value)}, //input的keyup回调
  itemCallBack: (event,value) => {console.log(event, value)} //点击单个项时回调
}

使用方法

1.安装npm组件包

npm install @beisen/auto-complete --save-dev

2.引用组件

import AutoComplete from "@beisen/auto-complete"

3.传入参数

该参数为上述参数，传入方式使用: {...参数}

{
    hidden: false,
    disabled: false,
    showCloseBtn: true,
    readOnly: false,
    required: true,
    isFetching: false,
    showText: '请输入正确信息',
    errorStatus: false, //是否报错
    errorMsg:"出错了~~~！", //报错信息
    helpMsg:"qdwdqwd",
    sideTip:false, //toolTip是否左右显示
    hiddenTip:false, //toolTip是否显示
    labelText: 'AutoComplete', //左侧 label 文字
    placeholder: '', // input placeholder
    inputDefaultValue: '', // input 默认值
    defaultItems: [], // autocomplete 数据 需传入一个DOM数组 nodeName为li
    "lablePos": true, //label位置，true时在左边，false在上边
    "lableTxt": false, //label中文字对齐方式，true左对齐，false右对齐
    keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
    itemCallBack: (event, data) => console.log(event, data), // autocomplete 点击回调
    focusCallBack: (value) => console.log(value), // input keyup输入回调
    blurCallBack: (event) => console.log(event.target), // autocomplete 点击回调
    changeCallBack: (event,value) => {console.log(event, value)}, // input keyup输入回调
}

class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            autoValue: this.setDefaultValue()
        }
    }
    
    // 返回defaultItems
    setDefaultValue(count = 5) {
        let items = [];

        for (let i = 0; i < count; i++) {
            items.push(<li key={i}>{i}</li>);
        }
        return items;
    }	
    
    // 根据keyup返回新的defaultItems
    setNewValue(count) {
        this.setState({autoValue: this.setDefaultValue(count)})
    }
    
    // 清空defaultItems
    restValue(event, data) {
        console.log(event, data)
        this.setState({autoValue: null});
    }

    render () {
        const {autoValue} = this.state;
        const options = {
            hidden: false,
            disabled: false,
            showCloseBtn: true,
            readOnly: false,
            required: true,
            isFetching: false,
            showText: '请输入正确信息',
            errorStatus: false, //是否报错
            errorMsg:"出错了~~~！", //报错信息
            helpMsg:"qdwdqwd",
            sideTip:false, //toolTip是否左右显示
            hiddenTip:false, //toolTip是否显示
            labelText: 'AutoComplete', //左侧 label 文字
            placeholder: '', // input placeholder
            inputDefaultValue: '', // input 默认值
            defaultItems: [], // autocomplete 数据 需传入一个DOM数组 nodeName为li
            "lablePos": true, //label位置，true时在左边，false在上边
            "lableTxt": false, //label中文字对齐方式，true左对齐，false右对齐
            keyUpCallBack: (event, value) => console.log(event, value), // input keyup输入回调
            itemCallBack: (event, data) => console.log(event, data), // autocomplete 点击回调
            focusCallBack: (value) => console.log(value), // input keyup输入回调
            blurCallBack: (event) => console.log(event.target), // autocomplete 点击回调
            changeCallBack: (event,value) => {console.log(event, value)}, // input keyup输入回调
        }
        return (
             <AutoComplete {...options} defaultItems={autoValue} keyUpCallBack={::this.setNewValue} itemCallBack={::this.restValue} />
        )
    }
}
render(<App />, document.getElementById('content'))