@beisen/auto-complete

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