AutoComplete 自动完成

规则

基础示例

const rule = {
    type: "autoComplete",
    title: "自动完成",
    field: "auto",
    value: "xaboy",
    inject: true,
    props: {}
}

Props 配置示例

静态选项

const rule = {
    type: "autoComplete",
    title: "商品名称",
    field: "product",
    value: "",
    props: {
        options: [
            "iPhone 15 Pro",
            "MacBook Pro",
            "iPad Air",
            "AirPods Pro",
        ],
        placeholder: "请输入或选择商品",
        clearable: true,
    }
}

远程搜索

const rule = {
    type: "autoComplete",
    title: "搜索商品",
    field: "keyword",
    value: "",
    props: {
        options: [],
        placeholder: "请输入商品名称",
        clearable: true,
        loading: false,
    },
    inject: true,
    on: {
        'update:value': ($inject, value) => {
            if (value && value.length >= 2) {
                // 调用搜索接口
                searchProducts(value).then(res => {
                    $inject.api.updateRule('keyword', {
                        props: {
                            options: res.data.map(item => item.name)
                        }
                    });
                });
            }
        },
    },
}

选中后清空

const rule = {
    type: "autoComplete",
    title: "商品名称",
    field: "product",
    value: "",
    props: {
        options: [
            "iPhone 15 Pro",
            "MacBook Pro",
        ],
        placeholder: "请输入或选择商品",
        clearAfterSelect: true,
    }
}

Events 事件示例

监听输入和选择

const rule = {
    type: "autoComplete",
    title: "商品名称",
    field: "product",
    value: "",
    props: {
        options: [
            "iPhone 15 Pro",
            "MacBook Pro",
        ],
        placeholder: "请输入或选择商品",
        clearable: true,
    },
    on: {
        'update:value': (value) => {
            console.log('输入值改变:', value);
        },
        select: (value) => {
            console.log('选择选项:', value);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

选择后联动更新

const rule = [
    {
        type: "autoComplete",
        title: "商品名称",
        field: "product",
        value: "",
        props: {
            options: [],
            placeholder: "请输入或选择商品",
        },
        inject: true,
        on: {
            select: ($inject, value) => {
                // 根据选择的商品名称，自动填充商品信息
                getProductInfo(value).then(res => {
                    $inject.api.setValue('price', res.data.price);
                    $inject.api.setValue('stock', res.data.stock);
                });
            },
        },
    },
    {
        type: "input-number",
        field: "price",
        title: "价格",
        props: {
            disabled: true,
        },
    },
    {
        type: "input-number",
        field: "stock",
        title: "库存",
        props: {
            disabled: true,
        },
    },
]

完整配置项:naive-ui_AutoComplete

value :String

Props

名称	类型	默认值	说明	版本
blur-after-select	boolean	false	选中后是否 blur
clear-after-select	boolean	false	选中后是否清空
clearable	boolean	false	自动填充是否支持可清除
disabled	boolean	false	自动填充是否禁用
get-show	(value: string) => boolean	undefined	根据输入值在聚焦的状态中决定是否显示菜单
input-props	HTMLInputAttributes	undefined	自动填充中 input 元素的属性
loading	boolean	false	是否展示加载状态
options	Array<string | AutoCompleteOption | AutoCompleteGroupOption>	[]	自动填充的自定义选项
placeholder	string	'请输入'	自动填充的提示信息
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	自动填充的弹出位置	2.25.0
render-label	(option: SelectOption | SelectGroupOption, selected: boolean) => VNodeChild	undefined	选项标签渲染函数	2.24.0
render-option	(info: { node: VNode, option: SelectOption | SelectGroupOption, selected: boolean }) => VNodeChild	undefined	选项的渲染函数	2.24.0
size	'small' | 'medium' | 'large'	'medium'	自动填充的尺寸大小
on-blur	(event: FocusEvent) => void	undefined	blur 时触发的回调函数
on-focus	(event: FocusEvent) => void	undefined	focus 时触发的回调函数
on-select	(value: string) => void	undefined	select 选中时触发的回调函数
on-update:value	(value: string | null) => void	undefined	可控数据更新时触发的回调函数