AutoComplete

Rules

Basic Example

const rule = {
    type: "autoComplete",
    title: "Auto-Complete",
    field: "auto",
    value: "xaboy",
    inject: true,
    props: {
    	search: function (inject, value) {
            inject.self.props.options = !value ? [] : [
                {value: value}, 
                {value: value + value}, 
                {value: value + value + value}
            ];
        }
	}
}

Props Configuration Examples

Remote Search

const rule = {
    type: "autoComplete",
    title: "Product Search",
    field: "product",
    inject: true,
    props: {
        placeholder: "Enter product name",
        allowClear: true,
        search: function (inject, value) {
            if (value) {
                // Call remote search API
                searchProducts(value).then(res => {
                    inject.self.props.options = res.data.map(item => ({
                        value: item.name,
                        id: item.id
                    }));
                });
            } else {
                inject.self.props.options = [];
            }
        }
    },
}

Custom Options

const rule = {
    type: "autoComplete",
    title: "User Search",
    field: "username",
    inject: true,
    props: {
        placeholder: "Enter username",
        search: function (inject, value) {
            inject.self.props.options = [
                {value: value + '1', label: value + '1'},
                {value: value + '2', label: value + '2'},
            ];
        }
    },
}

Events Examples

Listen to Selection Changes

const rule = {
    type: "autoComplete",
    title: "Product Search",
    field: "product",
    inject: true,
    props: {
        placeholder: "Enter product name",
        search: function (inject, value) {
            inject.self.props.options = [
                {value: value + '1'},
                {value: value + '2'},
            ];
        },
    },
    on: {
        select: (value, option) => {
            console.log('Selected suggestion:', value, option);
        },
        change: (value) => {
            console.log('Input value changed:', value);
        },
        blur: () => {
            console.log('Component blurred');
        },
        focus: () => {
            console.log('Component focused');
        },
        search: (value) => {
            console.log('Search:', value);
        },
    },
}

Fill Details After Selection

const rule = [
    {
        type: "autoComplete",
        title: "Product Search",
        field: "product",
        inject: true,
        props: {
            placeholder: "Enter product name",
            search: function (inject, value) {
                inject.self.props.options = [
                    {value: 'iPhone 15', id: 1, price: 5999},
                    {value: 'MacBook Pro', id: 2, price: 12999},
                ];
            },
        },
        on: {
            select: ($inject, value, option) => {
                // Auto-fill price after selecting product
                if (option.price) {
                    $inject.api.setValue('price', option.price);
                }
            },
        },
    },
    {
        type: "input-number",
        title: "Price",
        field: "price",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: Ant-design-vue_AutoComplete

value :String

Props

Parameter	Description	Type	Default
allowClear	Support clear, effective in single selection mode	boolean	false
autofocus	Auto focus	boolean	false
backfill	When using keyboard to select options, fill the selected item back into the input box	boolean	false
bordered	Whether to have border	boolean	true
clearIcon	Custom clear button using slot	slot	<CloseCircleFilled />
default (custom input)	Custom input box	slot	<Input />
defaultActiveFirstOption	Whether to highlight the first option by default	boolean	true
defaultOpen	Whether to expand dropdown menu by default	boolean	-
disabled	Whether disabled	boolean	false
popupClassName	className attribute of dropdown menu	string	-
dropdownMatchSelectWidth	Dropdown menu and selector have the same width. By default, min-width will be set, which will be ignored when the value is less than the selector width. false will disable virtual scrolling	boolean | number	true
dropdownMenuStyle	Custom style for dropdown menu	object
filterOption	Whether to filter based on input items. When it is a function, it will receive inputValue and option as parameters. When option meets the filter condition, it should return true, otherwise return false.	boolean or function(inputValue, option)	true
open	Whether to expand dropdown menu	boolean	-
option	Custom node through option slot	v-slot:option="{value, label, [disabled, key, title]}"	-
options	Data source for auto-complete	DataSourceItemType[]
placeholder	Input box hint	string | slot	-
status	Set validation status	'error' | 'warning'	-

Events

Event Name	Description	Callback Parameters
blur	Callback when losing focus	function()
change	Callback when option is selected or input value changes	function(value)
dropdownVisibleChange	Callback when dropdown menu expands	function(open)
focus	Callback when gaining focus	function()
search	Called when searching for completion items	function(value)
select	Called when selected, parameter is the selected item's value	function(value, option)
clear	Callback when clearing content	function