Autocomplete 自动补全输入框

使用

import { KAutocomplete } from "@ksware/ksw-ux";

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

基础用法

Autocomplete 组件提供输入建议。

fetch-suggestions 属性是返回建议输入的方法。 在此示例中， querySearch(queryString, cb) 方法通过 cb(data) 给 Autocomplete 组件返回建议。

自定义模板

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

使用 scoped slot 自定义输入建议。 在这个范围中，你可以使用 item 键来访问当前输入建议对象。

远程搜索

从服务端搜索数据。

自定义加载

修改加载区域内容

API

Props

参数名	描述	类型	默认值
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:[]) 来返回它	array | Function	-
trigger-on-focus	是否在输入框获得焦点时触发自动补全	boolean	true
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件	boolean	false
name	等价于原生 input name 属性	string	-
aria-label	原生 aria-label 属性	string	-
hide-loading	是否隐藏远程加载时的加载图标	boolean	false
popper-class	下拉列表的类名	string	-
popper-append-to-body	是否将下拉列表插入至 body 元素	boolean	false
teleported	是否将下拉列表元素插入 append-to 指向的元素下	boolean	true
highlight-first-item	是否默认高亮远程搜索结果的第一项	boolean	false
fit-input-width	下拉框的宽度是否与输入框相同	boolean	false

Events

事件名	描述	类型
blur	当选择器的输入框失去焦点时触发	Function
focus	当选择器的输入框获得焦点时触发	Function
input	在输入框的值改变时触发	Function
clear	在点击由 clearable 属性生成的清空按钮时触发	Function
select	点击选中建议时触发	Function
change	在输入框的值改变时触发	Function

Slots

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

Methods

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