自动补全输入框

根据输入内容提供对应的输入建议。

TIP

在 SSR（如 Nuxt）或 SSG 场景（如 VitePress）下，您需要将组件包裹在 <client-only></client-only> 之中。

基础用法

Autocomplete 组件提供输入建议。

自定义模板

自定义如何显示输入建议。

远程搜索

从服务端搜索数据。

自定义加载 2.5.0

修改加载区域内容

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	`string`	—
placeholder	占位文本	`string`	—
clearable	是否可清空	`boolean`	false
disabled	自动补全组件是否被禁用	`boolean`	false
value-key	输入建议对象中用于显示的键名	`string`	value
debounce	获取输入建议的防抖延时，单位为毫秒	`number`	300
placement	菜单弹出位置	`enum`	bottom-start
fetch-suggestions	获取输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 `callback(data:[])` 来返回它	`Function`	—
trigger-on-focus	whether show suggestions when input focus	`boolean`	true
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件	`boolean`	false
name	等价于原生 input `name` 属性	`string`	—
aria-label a11y 2.7.2	原生 `aria-label`属性	`string`	—
hide-loading	是否隐藏远程加载时的加载图标	`boolean`	false
popper-class	下拉列表的类名	`string`	—
popper-append-to-body deprecated	是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false	`boolean`	false
teleported	是否将下拉列表元素插入 append-to 指向的元素下	`boolean`	true
highlight-first-item	是否默认高亮远程搜索结果的第一项	`boolean`	false
fit-input-width	下拉框的宽度是否与输入框相同	`boolean`	false

Events

事件名	详情	类型
select	点击选中建议项时触发	`Function`
change	在 Input 值改变时触发	`Function`

Slots

插槽名	描述说明	类型
default	自定义输入建议的内容。	`object`
prefix	输入框头部内容	-
suffix	输入框尾部内容	-
prepend	输入框前置内容，在 prefix 之前	-
append	输入框后置内容，在 suffix 之后	-
loading 2.5.0	修改加载区域内容	-

Exposes

名称	详情	类型
activated	自动补全输入框是否被激活	`object`
blur	使 input 失去焦点	`Function`
close	折叠建议列表	`Function`
focus	使 input 获取焦点	`Function`
handleSelect	手动触发选中建议事件	`Function`
handleKeyEnter	手动触发键盘回车事件	`Function`
highlightedIndex	当前高亮显示选项的索引	`object`
highlight	在建议中高亮显示一个项目	`Function`
inputRef	el-input 组件实例	`object`
loading	远程获取提示内容的加载状态指示器	`object`
popperRef	el-tooltip 组件实例	`object`
suggestions	获取自动补全结果	`object`

源代码

组件 • 文档

贡献者

Config Provider 全局配置

Cascader 级联选择器