🌏 Translated with the assistance of DeepSeek and ChatGPT

Auto Complete

A text input field with suggestions.

Basic Usage

Pass options as the list of choices. Provide modelValue for controlled mode.
Omit it or set it to undefined for uncontrolled mode; in this case you can supply a defaultValue as the initial value.

Hide source code

Disabled Options

Inside options, set disabled: true on any choice to disable it.

Hide source code

Grouping

options also accepts option groups.

Hide source code

Remote Loading

Set the loading and showPopoverEmpty props and listen to the input event to reflect remote-loading UI states.

Hide source code

Append Mode

After selecting an option, append it to the existing input instead of replacing the content by enabling the append prop.
Use the filter and shouldShowPopover functions to control which options appear and when the popover is shown.

Hide source code

Virtual List

Enabling the virtualScroll property activates the virtual list, which can be turned on to improve performance when there is a large amount of option data.

Hide source code

Custom Rendering

option slot customizes option rendering, group-label slot customizes group label rendering.

Hide source code

More Options

This AutoComplete has most of Input component's features.

Disabled, Readonly, Loading & Clearable

Shape

Size

Slot

prefix

suffix

Composite

Status

Expose

Hide source code

API

AutoCompleteProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string | null	True		Value of the auto complete input (controlled mode), supports v-model.	0.0.2
defaultValue	string | null	True		Default value of the auto complete input (uncontrolled mode).	0.0.2
options	string	True		List of options.	0.0.2
placeholder	string	True		Placeholder text.	0.0.2
disabled	boolean	True	false	Whether the input is disabled.	0.0.2
readonly	boolean	True	false	Whether the input is read-only.	0.0.2
clearable	boolean	True	false	Whether to show a clear button.	0.0.2
loading	boolean	True	false	Whether to show a loading state.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Size of the auto complete input.	0.0.2
shape	'rect' | 'round'	True	'rect'	Shape of the auto complete input.	0.0.3
showPopoverEmpty	boolean	True	false	Whether to display the popover when the options list is empty.	0.0.2
shouldShowPopover	(value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean	True		Function to determine whether to show the popover while inputting.	0.0.2
filter	(keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[]	True		Function to filter the options.	0.0.2
append	boolean	True	false	Append mode.	0.0.2
virtualScroll	boolean	True	false	Whether render options with virtual list.	0.0.3
virtualListProps	Omit<VirtualListProps, 'list' | 'fixedHeight'> & RestAttrs	True		Properties of virtual list.	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Border-radius, takes precedence over shape. Follows CSS border-radius rules — single value or array of length 1 → all corners; length 2 → [top-left & bottom-right, top-right & bottom-left]; length 3 → [top-left, top-right & bottom-left, bottom-right]; length 4 → clockwise starting from top-left.	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	True	'normal'	Form validation status.	0.0.2
autofocus	boolean	True	false	Native <input> autofocus attribute.	0.0.2
dropdownProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	True		The configuration of the dropdown popover.	0.2.0
optionsDestroyOnHide	boolean	True	false	Whether the dropdown options will be destroyed when hidden.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance.	0.1.0

AutoCompleteEvents

Event	Parameter	Description	Version
input	value: string, e: Event	Callback fired when the input value changes.	0.0.2
update:modelValue	value: string	Callback fired when modelValue is updated.	0.0.2
change	value: string, e: Event | undefined	Callback fired when the input content changes.	0.0.2
clear	value: string	Callback fired when the clear button is clicked.	0.0.2
blur	e: FocusEvent	Callback fired when the input loses focus.	0.0.2
focus	e: FocusEvent	Callback fired when the input receives focus.	0.0.2
select	value: string, option: string | AutoCompleteOption, e: MouseEvent	Callback fired when an option is selected.	0.0.2
dropdownOpen		Callback when the dropdown panel is opened.	0.2.0
dropdownClose		Callback when the dropdown panel is closed.	0.2.0

AutoCompleteSlots

Slot	Parameter	Description	Version
prefix		Prefix content.	0.0.2
suffix		Suffix content.	0.0.2
option	option: string | AutoCompleteOption	Custom option content.	0.0.2
group-label	option: AutoCompleteGroupOption	Label for option groups.	0.0.2

AutoCompleteExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False		Focus the control.	0.0.2
blur	() => void	False		Blur the control.	0.0.2
clear	() => void	False		Clear the current input.	0.0.2
select	() => void	False		Select all text in the input.	0.0.2

Option, GroupOption

export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: 'group'
}

OptionListOption, OptionListOption

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

AutoCompleteOption, AutoCompleteGroupOption

export interface AutoCompleteOption extends OptionListOption<string> {
}

export interface AutoCompleteGroupOption extends OptionListGroupOption {
	children: (AutoCompleteOption | string)[]
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}