自动补全 (Autocpmpletes)

v-autocomplete 组件提供了简单且弹性的填充功能。在需要在大量数据中寻找结果或者需要请求后端 API 时很有用。

使用

自动补全组件拓展了 v-select 并且添加了过滤项目的功能。

API

组件	描述
v-autocomplete	主要组件
v-combobox	允许过滤和自定义值的选择组件
v-select	HTML 的替代品

注意

DANGER

当使用 items 属性的对象时，您必须将 item-title 和 item-value 与对象上的现有属性相关联。这些值默认为 title 和 value，并且可以更改。

示例

下面是一些简单到复杂的例子。

属性

间距

您可以使用 density 属性来调整组件内的垂直间距。

过滤器

custom-filter 属性可用于使用自定义逻辑过滤每个单独的项目。在此示例中，我们按名称过滤项目。

TIP

v-autocomplete 组件更新焦点/模糊事件的搜索模型。焦点将搜索设置为当前模型（如果可用），模糊将其清除。

与 v-combobox 不同，它不保留未列出的值。为了防止查询时出现不必要的 API 请求，请确保搜索不为空和/或与当前模型不匹配。

插槽

项目和选择项

借助插槽的强大功能，您可以自定义选择的视觉输出。在此示例中，我们为筹码和列表项添加个人资料图片。

其他

状态选择器

结合使用 v-autocomplete 插槽和过渡，您可以创建一个现代的的可切换的自动补全栏，例如这个状态选择器。

新标签

TIP

此功能在 v3.3.0 (Icarus) 中引入

auto-select-first 属性在搜索时突出显示第一个结果，允许您按

tab

或

enter

快速选择它。