自动完成

自动完成是一个输入组件，在输入时提供实时建议。

导入 # 


import AutoComplete from 'primevue/autocomplete';

基本 #

自动完成与 v-model 属性一起使用以进行双向值绑定。此外，还需要 suggestions 属性和一个 complete 方法来查询结果。

未找到结果

<AutoComplete v-model="value" :suggestions="items" @complete="search" />

对象 #

自动完成可以使用 optionLabel 属性来处理对象，该属性定义要显示为建议的标签。传递给模型的值仍然是建议的对象实例。这是一个具有名称和代码字段的 Country 对象的示例，例如 {name: "United States", code:"USA"}。

未找到结果

<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search" />

表单 #

自动完成与 PrimeVue 表单库无缝集成。

未找到结果

<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
    <div class="flex flex-col gap-1">
        <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
        <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

下拉列表 #

启用 dropdown 属性会在输入字段旁边显示一个按钮，按钮的单击行为使用 dropdownMode 属性定义，该属性接受 blank 或 current 作为可能的值。 blank 是发送空字符串查询的默认模式，而 current 设置发送带有输入当前值的查询。

未找到结果

<AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" />

模板 #

自动完成通过模板提供多个插槽以进行自定义。

未找到结果

<AutoComplete v-model="selectedCountry" optionLabel="name" :suggestions="filteredCountries" @complete="search">
    <template #option="slotProps">
        <div class="flex items-center">
            <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
            <div>{{ slotProps.option.name }}</div>
        </div>
    </template>
    <template #header>
        <div class="font-medium px-3 py-2">Available Countries</div>
    </template>
    <template #footer>
        <div class="px-3 py-3">
            <Button label="Add New" fluid severity="secondary" text size="small" icon="pi pi-plus" />
        </div>
    </template>
</AutoComplete>

组 #

选项组使用 optionGroupLabel 和 optionGroupChildren 属性指定。

未找到结果

<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="search" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Hint: type 'a'">
    <template #optiongroup="slotProps">
        <div class="flex items-center country-item">
            <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
            <div>{{ slotProps.option.label }}</div>
        </div>
    </template>
</AutoComplete>

强制选择 #

强制选择模式会验证手动输入，以检查它是否也存在于建议列表中，如果不存在，则清除输入值，以确保传递给模型的值始终是建议之一。只需启用 forceSelection 即可强制输入始终来自建议列表。

未找到结果

<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />

虚拟滚动 #

虚拟滚动是渲染大型列表的一种高性能方法。滚动行为的配置使用 virtualScrollerOptions 定义，该配置需要 itemSize 作为强制值来设置项目的高度。有关配置 API 的更多信息，请访问 VirtualScroller 文档。

未找到结果

<AutoComplete v-model="selectedItem" :suggestions="filteredItems" @complete="searchItems"
    :virtualScrollerOptions="{ itemSize: 38 }" optionLabel="label" dropdown />

填充 #

将 variant 属性指定为 filled 以显示组件，其视觉强调比默认的 outlined 样式更高。

未找到结果

<AutoComplete v-model="value" :suggestions="items" @complete="search" variant="filled" />

浮动标签 #

当聚焦时，浮动标签会出现在输入字段的顶部。有关更多信息，请访问 FloatLabel 文档。

未找到结果
未找到结果
未找到结果

<FloatLabel>
    <AutoComplete v-model="value1" inputId="over_label" :suggestions="items" @complete="search" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel variant="in">
    <AutoComplete v-model="value2" inputId="in_label" :suggestions="items" @complete="search" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel variant="on">
    <AutoComplete v-model="value3" inputId="on_label" :suggestions="items" @complete="search" />
    <label for="on_label">On Label</label>
</FloatLabel>

Ifta 标签 #

IftaLabel 用于创建内嵌顶部对齐标签。有关更多信息，请访问 IftaLabel 文档。

未找到结果

<IftaLabel>
    <AutoComplete v-model="value" inputId="ac" :suggestions="items" @complete="search" variant="filled" />
    <label for="ac">Identifier</label>
</IftaLabel>

大小 #

自动完成提供 small 和 large 大小作为基本大小的替代方案。

未找到结果
未找到结果
未找到结果

<AutoComplete v-model="value1" :suggestions="items" @complete="search" size="small" placeholder="Small" dropdown />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" placeholder="Normal" dropdown />
<AutoComplete v-model="value3" :suggestions="items" @complete="search" size="large" placeholder="Large" dropdown />

多选 #

使用 multiple 属性启用多选模式，用于从自动完成中选择多个值。在这种情况下，值引用应该是一个数组。

未找到结果
未找到结果

<label for="multiple-ac-1" class="font-bold mb-2 block">With Typeahead</label>
<AutoComplete v-model="value1" inputId="multiple-ac-1" multiple fluid :suggestions="items" @complete="search" />

<label for="multiple-ac-2" class="font-bold mt-8 mb-2 block">Without Typeahead</label>
<AutoComplete v-model="value2" inputId="multiple-ac-2" multiple fluid @complete="search" :typeahead="false" />

无效 #

使用 invalid 属性显示无效状态，以指示验证失败。在与表单验证库集成时，可以使用此样式。

未找到结果
未找到结果

<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />

禁用 #

当存在 disabled 时，该元素无法编辑和聚焦。

未找到结果

<AutoComplete disabled placeholder="Disabled" />

无障碍 #

屏幕阅读器

描述组件的值可以通过与 inputId 属性结合使用的 label 标签或使用 aria-labelledby、aria-label 属性提供。除了 aria-autocomplete、aria-haspopup 和 aria-expanded 属性之外，输入元素还具有 combobox 角色。输入和弹出窗口之间的关系是通过 aria-controls 创建的，aria-activedescendant 属性用于指示屏幕阅读器在弹出列表中的键盘导航期间读取哪个选项。

在多选模式下，芯片列表使用 listbox 角色，aria-orientation 设置为水平，而每个芯片都具有 option 角色，aria-label 设置为芯片的标签。

弹出列表的 ID 引用输入元素的 aria-controls 属性，并使用 listbox 作为角色。每个列表项都具有 option 角色和一个与输入元素的 aria-activedescendant 匹配的 ID。


<label for="ac1">;Username</label>
<AutoComplete inputId="ac1" />

<span id="ac2">Email</span>
<AutoComplete aria-labelledby="ac2" />

<AutoComplete aria-label="City" />

关闭状态键盘支持

按键功能
tab将焦点移动到自动完成元素。
任何可打印字符打开弹出窗口并将焦点移动到第一个选项。

弹出窗口键盘支持

按键功能
tab将焦点移动到弹出窗口中的下一个可聚焦元素。如果没有可聚焦元素，则会选中可聚焦的选项并关闭覆盖层，然后将焦点移动到页面中的下一个元素。
shift + tab将焦点移动到弹出窗口中的上一个可聚焦元素。如果没有可聚焦元素，则会选中可聚焦的选项并关闭覆盖层，然后将焦点移动到页面中的下一个元素。
enter选择焦点所在的选项并关闭弹出窗口，然后将焦点移动到自动完成元素。
空格键选择焦点所在的选项并关闭弹出窗口，然后将焦点移动到自动完成元素。
escape关闭弹出窗口，然后将焦点移动到自动完成元素。
向下箭头将焦点移动到下一个选项，如果没有则视觉焦点不会改变。
向上箭头将焦点移动到上一个选项，如果没有则视觉焦点不会改变。
alt + 向上箭头选择焦点所在的选项并关闭弹出窗口，然后将焦点移动到自动完成元素。
向左箭头从当前选项移除视觉焦点，并将输入光标向左移动一个字符。
向右箭头从当前选项移除视觉焦点，并将输入光标向右移动一个字符。
home如果当前不在输入框末尾，则将输入光标移动到末尾；否则将焦点移动到第一个选项。
end如果当前不在输入框开头，则将输入光标移动到开头；否则将焦点移动到最后一个选项。
pageUp将视觉焦点跳转到第一个选项。
pageDown将视觉焦点跳转到最后一个选项。

芯片输入框键盘支持

按键功能
退格键如果输入字段为空，则删除上一个芯片。
向左箭头如果输入字段为空，则将焦点移动到上一个芯片（如果存在）。

芯片键盘支持

按键功能
向左箭头如果存在，将焦点移动到上一个芯片。
向右箭头将焦点移动到下一个芯片，如果没有下一个芯片，则输入字段获得焦点。
退格键删除所有芯片并将焦点移到输入字段。
PrimeVue 4.2.5，基于 Vue 3，由PrimeTek