AutoComplete 自动完成

基本用法

import '@company-ui/style';
import { Autocomplete } from '@company-ui/dom';

new Autocomplete({
  target: '#autocomplete1',
  placeholder: 'Input company name',
});

其他数据源用法

import '@company-ui/style';
import { Autocomplete } from '@company-ui/dom';

new Autocomplete({
  api: 'qcc_open',
  target: '#autocomplete2',
  autoFocus: false,
  submitButtonLabel: '查一查',
  historyStorageKey: 'qcc-open-company-history',
});

API

Attributes

Name	Description	Type	Default
target	HTML元素标签的id	string	-
api	查询数据源	string	clearbit
queryDelay	查询数据延迟	number	500
placeholder	输入占位符内容	string	Input company name
clearable	显示清除按钮	boolean	true
backFill	使用键盘选择选项的时候把选中项回填到输入框中	boolean	true
popupAppendToBody	是否插入至 body 元素上	boolean	true
autoFocus	自动获取焦点	boolean	true
showSubmitButton	显示提交按钮	boolean	true
submitButtonLabel	提交按钮文字	string	Submit
offsetTop	距离文本框底部的偏移值	number	5
autoFlip	文本框是否自动翻转	boolean	false
avatarUrl	头像链接	string	-
clearIcon	清除按钮图标	string
history	历史记录配置	HistoryOptions	HistoryOptions

HistoryOptions

Name	Description	Type	Default
enabled	打开保存历史记录	boolean	true
type	保存历史记录模式	string	localStorage
key	保存历史记录键	string	company-history
showClear	显示历史记录清除按钮	boolean	true
itemIcon	历史记录图标	string
clearIcon	清除历史记录按钮图标	string

Events

Name	Description	Type
onInput	当输入值改变时触发	Function
onChange	当输入值改变时触发	Function
onFetch	查询数据时触发	Function
onAbortFetch	当中止查询数据时触发	Function
onSelect	当单击建议时触发	Function
onClear	当单击文本框清除按钮时触发	Function
onFocus	当输入聚焦时触发	Function
onBlur	当输入取消聚焦时触发	Function
submitCallback	按钮提交时触发	Function
onDropdownVisibleChange	当下拉菜单出现/消失时触发	Function