Have ideas to improve npm?Join in the discussion! »

    @beisen/auto-complete

    0.2.43 • Public • Published

    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'))
     

    Install

    npm i @beisen/auto-complete

    DownloadsWeekly Downloads

    77

    Version

    0.2.43

    License

    ISC

    Unpacked Size

    1.66 MB

    Total Files

    42

    Last publish

    Collaborators

    • avatar