Autocomplete 自动补全输入框

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

基础用法

自定义模板

远程搜索

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string	—
input-id	输入框 id，同时会设置 label 的 for 属性	string	r-input-n-input
placeholder	占位文本	string	—
clearable	是否可清空	boolean	false
clear-icon v1.10.2	清除图标名称或图片链接，等同于 Icon 组件的 name 属性	string	clear
show-arrow v1.10.3	是否展示小箭头	boolean	true
disabled	自动补全组件是否被禁用	boolean	false
value-key	输入建议对象中用于显示的键名	string	value
debounce	获取输入建议的防抖延时，单位为毫秒	number	300
placement	菜单弹出位置	enum	bottom-start
fetch-suggestions	获取输入建议的方法， 仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它	Function	—
popper-class	下拉列表的类名	string	—
trigger-on-focus	输入焦点时是否显示建议	boolean	true
name	等价于原生 input name 属性	string	—
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件	boolean	false
label	输入框关联的 label 文字	string	—
hide-loading	是否隐藏远程加载时的加载图标	boolean	false
teleport	指定挂载的节点，等同于 Teleport 组件的 to 属性	string | Element	body
highlight-first-item	是否默认高亮远程搜索结果的第一项	boolean	false
fit-input-width	下拉框的宽度是否与输入框相同	boolean	false
lazy-render	是否在首次展开时才渲染面板内容	boolean	true

Events

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

Slots

插槽名	描述说明
default	自定义输入建议的内容。 自定义标签，参数为
left-icon	自定义输入框头部图标
right-icon	自定义输入框尾部图标

方法

通过 ref 可以获取到 Input 实例并调用实例方法，详见组件实例方法。

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