根据输入内容提供对应的输入建议。
TIP
在 SSR（如 Nuxt）或 SSG 场景（如 VitePress）下，您需要将组件包裹在 <client-only></client-only> 之中。
基础用法#
Autocomplete 组件提供输入建议。
fetch-suggestions 属性是返回建议输入的方法。 在此示例中， querySearch(queryString, cb) 方法通过 cb(data) 给 Autocomplete 组件返回建议。
list suggestions when activated
list suggestions on input
自定义模板#
自定义如何显示输入建议。
使用 scoped slot 自定义输入建议。 在这个范围中，你可以使用 item 键来访问当前输入建议对象。
远程搜索#
从服务端搜索数据。
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 |
— |
| label | 输入框关联的 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 之后 | - |
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 |
