Autocomplete 自动补全输入框

根据用户输入内容提供对应的补全建议，适用于需要联想、历史记录或远程检索的场景。

import { createApp } from 'vue'
import { ElAutocomplete } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElAutocomplete)

基础用法

通过 fetch-suggestions 返回建议列表。支持数组或函数两种形式，函数通过 callback(data) 异步返回结果。

自定义模板

使用默认插槽自定义每一条建议的渲染，可以展示更丰富的结构化信息。

远程搜索

配合防抖与后端接口实现远程检索，适合数据量较大或需要后端过滤的场景。

前缀 / 后缀

使用 prefix、suffix、prepend、append 插槽扩展输入框两侧的内容。

自定义头部与底部

通过 header 和 footer 插槽定制下拉菜单的顶部与底部区域，常用于提示、分类或操作按钮。

API

Attributes

属性	说明	类型	默认值
model-value / v-model	选中项绑定值	string	—
fetch-suggestions	获取建议的方法或静态数组	Array / Function	—
placeholder	占位符	string	—
trigger-on-focus	聚焦时是否触发搜索	boolean	true
debounce	搜索防抖延时（ms）	number	300
clearable	是否可清空	boolean	false
value-key	建议对象中用于显示的 key	string	value

Events

事件	说明	参数
select	选中某一建议项时触发	item
change	输入值变化时触发	value
clear	点击清空按钮时触发	—

Slots

名称	说明
default	自定义建议项渲染，作用域参数 { item }
prefix / suffix	输入框前/后图标
prepend / append	输入框前/后置内容
header / footer	下拉列表头部/底部

更多属性与用法请参考 Element Plus Autocomplete 文档。