Autocomplete 输入建议

根据当前输入获取一些推荐提示。

基础用法

Autocomplete 组件提供输入建议。

自定义模板

自定义建议的显示方式。

远程搜索

从服务端搜索数据。

自定义加载中 2.5.0

覆盖加载内容。

自定义头部和尾部 2.10.6

您可以使用插槽自定义下拉列表的头部和尾部

API

属性

名称	描述	类型	默认值
model-value / v-model	绑定值	`string`	—
占位符	输入框的占位文本	`string`	—
可清空	是否显示清除按钮	`boolean`	false
disabled	是否禁用	`boolean`	false
value-key	输入建议对象中用于显示的键名	`string`	value
防抖	输入时的去抖延迟，单位为毫秒	`number`	300
placement	弹出菜单的位置	`枚举`	下左
获取建议	一个获取输入建议的方法。当建议准备好时，调用 `callback(data:[])` 将它们返回给 Autocomplete	`数组` / `函数`	—
聚焦时触发	输入框聚焦时是否显示建议	`boolean`	true
不匹配时选择	在没有自动补全匹配的情况下，在回车时是否发出一个 `select` 事件	`boolean`	false
名称	与原生输入框的 `name` 相同	`string`	—
aria-label a11y 2.7.2	原生 `aria-label` 属性	`string`	—
隐藏加载中	在远程搜索中是否隐藏加载图标	`boolean`	false
popper-class	autocomplete 下拉列表的自定义类名	`string` / `object`	''
popper-style 2.11.4	为 autocomplete 下拉列表自定义样式	`string` / `object`	—
teleported	下拉选择框是否被传送至 body	`boolean`	true
添加到 2.9.9	选择器下拉列表应附加到哪个元素上	`CSSSelector` / `HTMLElement`	—
高亮首个选项	是否默认高亮远程搜索建议中的第一项	`boolean`	false
fit-input-width	下拉框的宽度是否与输入框相同	`boolean`	false
popper-append-to-body 已弃用	是否将下拉列表附加到 body。如果下拉列表的定位错误，可以尝试将此属性设置为 false	`boolean`	false
循环导航 2.11.4	键盘导航是否从末尾循环到开头	`boolean`	true
输入框属性	—	—	—

事件

名称	描述	类型
blur	在 Input 失去焦点时触发	`Function`
focus	在 Input 获得焦点时触发	`Function`
input	在 Input 值改变时触发	`Function`
clear	在点击清除按钮清空 Input 时触发	`Function`
select	当点击一个建议时触发	`Function`
change	当输入框内的图标值改变时触发	`Function`

插槽

名称	描述	类型
default	用于输入建议的自定义内容	`object`
头部 2.10.6	下拉列表顶部的内容	-
尾部 2.10.6	下拉列表底部的内容	-
prefix	作为输入框前缀的内容	-
suffix	作为 Input 后缀的内容	-
prepend	在 Input 前添加的内容	-
append	在 Input 后附加的内容	-
加载中 2.5.0	覆盖加载中内容	-

暴露

名称	描述	类型
已激活	autocomplete 是否已激活	`object`
blur	使输入框元素失焦	`Function`
关闭	折叠建议列表	`Function`
focus	使输入框元素聚焦	`Function`
处理选择	当点击一个建议时触发	`Function`
处理回车键	处理键盘回车事件	`Function`
高亮项索引	当前高亮项的索引	`object`
高亮	高亮建议中的一个项目	`Function`
inputRef	el-input 组件实例	`object`
加载中	远程搜索加载指示器	`object`
popperRef	el-tooltip 组件实例	`object`
建议	获取建议的结果	`object`
getData 2.8.4	加载建议列表	`Function`