Autocomplete

The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.

用例

The autocomplete component extends v-select and adds the ability to filter items.

API

名称

allow-overflow

默认值

true

类型

boolean

Components.Autocompletes.

名称

append-icon

默认值

'$vuetify.icons.dropdown'

类型

string

Components.Autocompletes.

名称

append-outer-icon New in — v1.1

默认值

undefined

类型

string

Components.Autocompletes.

名称

attach

默认值

false

类型

any

指定该组件应该分离到哪个DOM元素，使用CSS选择器字符串或元素的对象应用。

名称

auto-select-first

默认值

false

类型

boolean

Components.Autocompletes.

名称

autofocus

默认值

false

类型

boolean

启用自动聚焦

名称

background-color

默认值

undefined

类型

string

Components.Autocompletes.

名称

box

默认值

false

类型

boolean

应用备用输入框样式

名称

browser-autocomplete

默认值

'off'

类型

string

Components.Autocompletes.

名称

cache-items

默认值

false

类型

boolean

保留已经通过 items 属性的项在本地的唯一副本

名称

chips

默认值

false

类型

boolean

改变一个已选择项为小纸片（chips）的显示方式

名称

clear-icon

默认值

'$vuetify.icons.clear'

类型

string

Components.Autocompletes.

名称

clearable

默认值

false

类型

boolean

添加输入框清除功能，默认图标是 Material Icons clear

名称

color

默认值

'primary'

类型

string

将指定的色彩应用与控件

名称

counter

默认值

undefined

类型

boolean | number | string

为输入长度创建一个计数器，如果未指定数字，则默认为25，不会应用任何验证。

名称

dark

默认值

false

类型

boolean

应用暗黑主题变体

名称

deletable-chips

默认值

false

类型

boolean

添加一个去除图标的到选定的小纸片（chips）

名称

dense

默认值

false

类型

boolean

减小列表的最大高度

名称

disabled

默认值

false

类型

boolean

Components.Autocompletes.

名称

dont-fill-mask-blanks

默认值

false

类型

boolean

键入时禁用自动字符显示

名称

error

默认值

false

类型

boolean

将输入框设置为手动错误状态。

名称

error-count

默认值

类型

number | string

Components.Autocompletes.

名称

error-messages

默认值

[]

类型

string | array

将输入框置于错误状态，并传入自定义的错误信息。将与来自规则（rules）属性的任何验证相结合。这个字段不会触发验证。

名称

filter

默认值

(item: object, queryText: string, itemText: string) => boolean

类型

function

Components.Autocompletes.

名称

flat

默认值

false

类型

boolean

Components.Autocompletes.

名称

full-width

默认值

false

类型

boolean

指定输入框为全屏宽度。

名称

height

默认值

undefined

类型

number | string

设置组件高度

名称

hide-details

默认值

false

类型

boolean

Components.Autocompletes.

名称

hide-no-data

默认值

false

类型

boolean

Components.Autocompletes.

名称

hide-selected

默认值

false

类型

boolean

不要在选择菜单中显示已选择的项

名称

hint

默认值

undefined

类型

string

Components.Autocompletes.

名称

item-avatar

默认值

avatar

类型

string | array | function

设置 items 属性的头像

名称

item-disabled

默认值

disabled

类型

string | array | function

禁用 items 的属性值

名称

item-text

默认值

text

类型

string | array | function

设置items'属性的文本值

名称

item-value

默认值

value

类型

string | array | function

设置items属性的值

名称

items

默认值

[]

类型

array

可以是一个对象数组或字符窜数组，当使用对象时，会查找文本和值字段，这可以使用 item-text 和 item-value 属性来改变。

名称

label

默认值

undefined

类型

string

Components.Autocompletes.

名称

light

默认值

false

类型

boolean

应用明亮主题变体

名称

默认值

false

类型

boolean | string

Components.Autocompletes.

名称

mask

默认值

undefined

类型

object | string

将自定义字符掩码应用于输入框。有关更多信息，请参阅上面的掩码表格。

名称

menu-props New in — v1.2

默认值

{"closeOnClick":false, "closeOnContentClick":false, "openOnClick":false, "maxHeight":300}

类型

string | array | object

Components.Autocompletes.

名称

messages

默认值

[]

类型

string | array

Components.Autocompletes.

名称

multiple

默认值

false

类型

boolean

多选，接受数组作为值

名称

no-data-text

默认值

'$vuetify.noDataText'

类型

string

当没有数据时显示的文本

名称

no-filter New in — v1.1

默认值

false

类型

boolean

Components.Autocompletes.

名称

open-on-clear

默认值

false

类型

boolean

当使用 clearable 属性, 一旦清除，选择菜单将打开或保持打开，这个取决于当前状态

名称

outline

默认值

false

类型

boolean

Components.Autocompletes.

名称

persistent-hint

默认值

false

类型

boolean

Components.Autocompletes.

名称

placeholder

默认值

undefined

类型

string

Components.Autocompletes.

名称

prefix

默认值

undefined

类型

string

显示前缀

名称

prepend-icon

默认值

undefined

类型

string

Components.Autocompletes.

名称

prepend-inner-icon New in — v1.1

默认值

undefined

类型

string

Components.Autocompletes.

名称

readonly

默认值

false

类型

boolean

Components.Autocompletes.

名称

return-masked-value

默认值

false

类型

boolean

返回未修改的掩码字符串

名称

return-object

默认值

false

类型

boolean

将选择器的行为更改为直接返回对象，而不是 item-value 指定的值

名称

reverse New in — v1.1

默认值

false

类型

boolean

Components.Autocompletes.

名称

rules

默认值

[]

类型

array

返回True或带有错误信息的字符串的函数数组。

名称

search-input

默认值

undefined

类型

any

使用自动补全（autocomplete）属性，使用 .sync 修饰符从自动补全搜索框中捕获用户的输入

名称

single-line

默认值

false

类型

boolean

Label does not move on focus/dirty

名称

small-chips New in — v1.1

默认值

false

类型

boolean

Components.Autocompletes.

名称

solo

默认值

false

类型

boolean

Components.Autocompletes.

名称

solo-inverted

默认值

false

类型

boolean

Components.Autocompletes.

名称

success New in — v1.1

默认值

false

类型

boolean

Components.Autocompletes.

名称

success-messages New in — v1.1

默认值

[]

类型

string | array

Components.Autocompletes.

名称

suffix

默认值

undefined

类型

string

显示后缀

名称

type

默认值

'text'

类型

string

设置输入类型

名称

validate-on-blur

默认值

false

类型

boolean

延迟验证直到失去焦点的事件被触发

名称

value

默认值

undefined

类型

any

控制可见性

名称

value-comparator

默认值

(a: any, b: any) => boolean

类型

function

Components.Autocompletes.

补充

**Mask legend**
Mask	Description
Masks
#	Any digit
A	Any capital letter
a	Any small letter
N	Any capital alphanumeric character
n	Any small alphanumeric character
X	Any special symbol (-!$%^&*()_+\|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card	#### - #### - #### - ####
date-with-time	##/##/#### ##:##
phone	(###) ### - ####
social	###-##-####
time	##:##
time-with-seconds	##:##:##

示例

Searching an API

Easily hook up dynamic data and create a unique experience. The v-autocomplete's expansive prop list makes it easy to fine tune every aspect of the input.

Scoped slots

With the power of scoped slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.

Custom filter on autocomplete

The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name

Asynchronous items

Sometimes you need to load data externally based upon a search query. Use the search-input prop with the .sync modifier when using the autocomplete prop. We also make use of the new cache-items prop. This will keep a unique list of all items that have been passed to the items prop and is REQUIRED when using asynchronous items and the multiple prop.

Advanced slots

The v-autocomplete component is extremely flexible and can fit in just about any use-case. Create custom displays for no-data, item and selection slots to provide a unique user experience. Using scoped slots enables you to easily customize the desired look for your application.

Up Next

Edit this page | language on Github

— Contribution Guide