# @beisen-platform/auto-complete

> 平台智能搜索组件

Latest version **1.0.3** (published 2019-11-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/auto-complete
pnpm add @beisen-platform/auto-complete
yarn add @beisen-platform/auto-complete
bun add @beisen-platform/auto-complete
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-11-14 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 584.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/auto-complete
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-auto-complete
- npm.io page: https://npm.io/package/@beisen-platform/auto-complete

## Dependencies (9)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [@beisen-platform/loading](https://npm.io/package/@beisen-platform/loading.md)
- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen/es6-promise-debounce](https://npm.io/package/@beisen/es6-promise-debounce.md)
- [@beisen-platform/common-input](https://npm.io/package/@beisen-platform/common-input.md)
- [@beisen-platform/common-label](https://npm.io/package/@beisen-platform/common-label.md)
- [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md)

## Recent versions

- 1.0.3 (latest) — 2019-11-14
- 1.0.1-rc.7 — 2019-10-30
- 1.0.1-rc.6 — 2019-08-05
- 1.0.1-rc.5 — 2019-07-22
- 1.0.1-rc.4 — 2019-07-05
- 1.0.1-rc.3 — 2019-06-21
- 1.0.1-rc.1 — 2019-04-29
- 1.0.1 — 2019-03-22
- 1.0.0 — 2019-03-16
- 0.2.28 — 2019-03-15
- 0.2.27 — 2018-12-02
- 0.2.25 — 2018-11-29

## README

# AutoComplete

## 参数
```javascript
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.引用组件

  ```javascript
import AutoComplete from "@beisen/auto-complete"
  ```
3.传入参数

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


```javascript
{
	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输入回调
}
```


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

```

---
_Source: https://npm.io/package/@beisen-platform/auto-complete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._