# UAutoComplete 自动完成 - [示例](#示例) - [基本用法](#基本用法) - [API]() - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) **表单控件**, **行内展示** 输入框自动完成。与选择框的区别是，自动完成是一个带提示的文本框，用户可以自由输入，筛选和填充使用的是文本字段；而选择框是在限定的可选项中进行选择，筛选使用的是文本字段，选择后使用的是值字段。 ## 示例 ### 基本用法 #### data-source 数组 直接向`data-source`属性中传入`Array`格式的数组，每个`Item`为这样格式的对象`{ text: string, value: any, disabled: boolean, ... }`。 ``` vue ``` #### data-source 函数 向`data-source`属性中传入一个加载函数，这种方式会自动处理 loading 加载、error 错误等效果，并且在下文中的加载更多、过滤（搜索）等功能均需要采用这种传入数据的方式。 加载函数的格式是这样的 ``` ts (params) => Promise | { data: Array, total: number } | { data: Array, last: boolean }> ``` 组件会给加载函数提供过滤（搜索）、加载更多等参数，要求返回一个如上的 Promise。 ``` vue ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | value.sync, v-model | string | | | 输入框的值 | | clearable | boolean | | | 开启并在输入框有内容时会显示清除按钮。 | | placeholder | string | | | 原生属性。对 IE9 做了兼容。 | | minlength | number | | | 原生属性 | | maxlength | number | | | 原生属性 | | spellcheck | boolean | | | 原生属性 | | autofocus | boolean | | | 是否自动获取焦点 | | readonly | boolean | | `false` | 是否只读 | | disabled | boolean | | `false` | 是否禁用 | | size | size | `'mini'`
`'small'`
`'normal'`
`'medium'`
`'large'`
`'huge'`
`'full'` | `'normal'` | 大小扩展，支持一个值：`'mini'`, `'small'`, `'normal'`, `'medium'`, `'large'`, `'huge'`, `'full'`，或两个值的组合，前者表示高度，后者表示宽度，类似CSS的padding书写格式 | | maxlengthMessage | string | | | 输入内容达到上限时的错误提示，且被 [FormItem](#/components/u-form) 包裹时生效 | ### Slots #### (default) 插入 HTML 或 `Component`, 可展示额外内容。 ### Events #### @before-input 输入前触发。可以在这个阶段阻止输入，或者修改输入的值 $event.value | Param | Type | Description | | ----- | ---- | ----------- | | $event.oldValue | string | 旧的值 | | $event.value | string | 输入框的值 | | $event.preventDefault | Function | 阻止输入流程 | | senderVM | UInput | 发送事件实例 | #### @input 输入时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | string | 输入框的值 | | senderVM | UInput | 发送事件实例 | #### @change 值变化时触发。（注意：与原生事件不同） | Param | Type | Description | | ----- | ---- | ----------- | | $event.value | string | 改变后的值 | | $event.oldValue | string | 旧的值 | | senderVM | UInput | 发送事件实例 | #### @focus 获得焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | UInput | 发送事件实例 | #### @blur 失去焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | UInput | 发送事件实例 | #### @before-clear 清空前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event.value | string | 清空后的值 | | $event.oldValue | string | 待清空的值 | | $event.preventDefault | Function | 阻止清空流程 | | senderVM | UInput | 发送事件实例 | #### @clear 清空后触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event.value | string | 清空后的值 | | $event.oldValue | string | 旧的值 | | senderVM | UInput | 发送事件实例 | Methods #### focus() 让输入框获取焦点。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### blur() 让输入框失去焦点。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### clear() 清空输入框。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |