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: {
        options: [
            "iPhone 15 Pro",
            "MacBook Pro",
            "iPad Air",
            "AirPods Pro",
        ],
        placeholder: "Enter or select product",
        clearable: true,
    }
}

Remote Search

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

Clear After Select

const rule = {
    type: "autoComplete",
    title: "Product Name",
    field: "product",
    value: "",
    props: {
        options: [
            "iPhone 15 Pro",
            "MacBook Pro",
        ],
        placeholder: "Enter or select product",
        clearAfterSelect: true,
    }
}

Events Examples

Handle Input and Selection

const rule = {
    type: "autoComplete",
    title: "Product Name",
    field: "product",
    value: "",
    props: {
        options: [
            "iPhone 15 Pro",
            "MacBook Pro",
        ],
        placeholder: "Enter or select product",
        clearable: true,
    },
    on: {
        'update:value': (value) => {
            console.log('Input value changed:', value);
        },
        select: (value) => {
            console.log('Selected option:', value);
        },
        blur: () => {
            console.log('Lost focus');
        },
        focus: () => {
            console.log('Gained focus');
        },
    },
}

Linkage Update After Selection

const rule = [
    {
        type: "autoComplete",
        title: "Product Name",
        field: "product",
        value: "",
        props: {
            options: [],
            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: naive-ui_AutoComplete

value :String

Props

Name	Type	Default Value	Description	Version
blur-after-select	boolean	false	Whether to blur after selection
clear-after-select	boolean	false	Whether to clear after selection
clearable	boolean	false	Whether AutoComplete supports clearing
disabled	boolean	false	Whether AutoComplete is disabled
get-show	(value: string) => boolean	undefined	Determine whether to show menu based on input value in focused state
input-props	HTMLInputAttributes	undefined	Properties of input element in AutoComplete
loading	boolean	false	Whether to show loading state
options	Array<string | AutoCompleteOption | AutoCompleteGroupOption>	[]	Custom options for AutoComplete
placeholder	string	'请输入'	Hint message for AutoComplete
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	Popup position of AutoComplete	2.25.0
render-label	(option: SelectOption | SelectGroupOption, selected: boolean) => VNodeChild	undefined	Option label render function	2.24.0
render-option	(info: { node: VNode, option: SelectOption | SelectGroupOption, selected: boolean }) => VNodeChild	undefined	Option render function	2.24.0
size	'small' | 'medium' | 'large'	'medium'	Size of AutoComplete
on-blur	(event: FocusEvent) => void	undefined	Callback function triggered on blur
on-focus	(event: FocusEvent) => void	undefined	Callback function triggered on focus
on-select	(value: string) => void	undefined	Callback function triggered on select
on-update:value	(value: string | null) => void	undefined	Callback function triggered when controlled data updates