AutoComplete

Rules

Basic Example

const rule = {
    type: "autoComplete",
    title: "Auto Complete",
    field: "auto",
    value: "xaboy",
    inject: true,
    props: {}
}

Props Configuration Examples

Static Options

const rule = {
    type: "autoComplete",
    title: "Product Name",
    field: "product",
    value: "",
    props: {
        data: [
            { value: "iPhone 15 Pro" },
            { value: "MacBook Pro" },
            { value: "iPad Air" },
            { value: "AirPods Pro" },
        ],
        placeholder: "Enter or select product",
    }
}

Remote Search

const rule = {
    type: "autoComplete",
    title: "Search Products",
    field: "keyword",
    value: "",
    props: {
        data: [],
        placeholder: "Enter product name",
    },
    inject: true,
    on: {
        search: ($inject, value) => {
            if (value && value.length >= 2) {
                // Call search API
                searchProducts(value).then(res => {
                    $inject.api.updateRule('keyword', {
                        props: {
                            data: res.data.map(item => ({ value: item.name }))
                        }
                    });
                });
            }
        },
    },
}

Events Examples

Handle Input and Selection

const rule = {
    type: "autoComplete",
    title: "Product Name",
    field: "product",
    value: "",
    props: {
        data: [
            { value: "iPhone 15 Pro" },
            { value: "MacBook Pro" },
        ],
        placeholder: "Enter or select product",
    },
    on: {
        change: (value) => {
            console.log('Input value changed:', value);
        },
        select: (value) => {
            console.log('Option selected:', value);
        },
        search: (value) => {
            console.log('Search value:', value);
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type: "autoComplete",
        title: "Product Name",
        field: "product",
        value: "",
        props: {
            data: [],
            placeholder: "Enter or select product",
        },
        inject: true,
        on: {
            select: ($inject, value) => {
                // Auto-fill product info from selection
                getProductInfo(value).then(res => {
                    $inject.api.setValue('price', res.data.price);
                    $inject.api.setValue('stock', res.data.stock);
                });
            },
        },
    },
    {
        type: "input-number",
        field: "price",
        title: "Price",
        props: {
            disabled: true,
        },
    },
    {
        type: "input-number",
        field: "stock",
        title: "Stock",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: arco-design_AutoComplete

value: String

Props

Parameter	Description	Type	Default	Version
disabled	Whether disabled	boolean	false
data	Data for auto-completion	Option[]	[]
popup-container	Mount container for popup	string | HTMLElement | null | undefined	-
strict	Whether in strict validation mode	boolean	false
filter-option	Custom option filter method	FilterOption	true
trigger-props	Trigger component properties	object	-	2.14.0

Events

Event Name	Description	Parameters
change	Triggered when bound value changes	value: string
search	Triggered when user searches	value: string
select	Triggered when option is selected	value: string