Autocomplete 自动完成

示例

设置 suggest-trigger 来指定触发建议的时机。

设置 strict 属性来指定严格模式，若输入值没有完全匹配建议值，那么在失焦时会清空输入值。

设置 match 属性来自定义高亮逻辑；设置 filter 属性来自定义搜索命中逻辑。

:::tip match 用于高亮显示匹配文本的逻辑；而 filter 是控制是否命中。默认情况下 filter 会过滤掉未被 match 匹配的节点，且将包含非叶子节点。如希望搜索结果中都是叶子节点，可通过重写 filter 过滤掉非叶子节点。 :::

名称	类型	默认值	描述
`datasource`	`Array<string	Object>=`	`[]`
`value`	`*`	-	[^prop-value]
`disabled`	`boolean=`	`false`	是否为禁用状态。
`readonly`	`boolean=`	`false`	是否为只读状态。
`match`	`(item, keyword, { ancestors }) => boolean	[number, number]	Array<[number, number]>`
`filter`	`(item, keyword, { ancestors, offsets }) => boolean`	-	支持自定义搜索命中逻辑。
`suggest-trigger`	`string	Array=`	`'input'`
`expanded`	`boolean=`	`false`	[^expanded]
`placeholder`	`string=`	-	输入占位符。
`clearable`	`boolean=`	`false`	是否显示清除按钮。
`composition`	`boolean=`	`false`	是否感知输入法输入过程的值。
`select-on-focus`	`boolean=`	`false`	聚焦时是否自动选中输入框文本。
`maxlength`	`number=`	-	输入字符串的长度限制。
`strict`	`boolean=`	`false`	输入字符串到达长度限制以后是否禁止继续输入。
`get-length`	`function(string): number=`	自定义的字符长度计算函数。
`trim`	`boolean	string=`	`false`
`autofocus`	`boolean=`	`false`	是否自动获取焦点。

^^^datasource 数据源数组，项目为 Object 时字段为 {label, value, children, ...}。

+++字段详情

^^^prop-value :::badges v-model :::

当前选中的值。 ^^^

^^^expanded :::badges .sync :::

建议面板是否展开（如果 suggestions 中没有待选项，则即使为 true 时面板也会关闭）。 ^^^

^^^trim 是否移除前后空格。当为 true 时，会移除前后空格，当为 false 时，不移除前后空格。设置为字符串时，按指定方式进行移除。

+++枚举值

名称	描述
`suggestions`	[^slot-suggestions]
`option-label`	[^slot-option-label]

^^^slot-suggestions

下拉建议面板插槽。

+++作用域参数

^^^slot-option-label

下拉面板中选项插槽。

+++作用域参数

名称	类型	描述
`label`	`string`	用来显示的节点文案，不存在则取 `value`。
`value`	`string`	用来实际选中的值。
`matches`	`Array<{text: string, matched: boolean}>`	匹配情况，一个节点可能被切分成多断文本，`text` 表示该段文本， `matched` 表示该段文本是否匹配。
+++
^^^

名称	描述
`input`	[^event-input]
`select`	采纳建议时触发，参数是当前值。
`toggle`	提示面板展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。
`clear`	清除当前值时触发。

^^^event-input :::badges v-model :::

当在 input 中输入或下拉面板中选值会触发该事件，参数是当前输入值或选中时的选中项目的 value。 ^^^