AutoComplete 自动完成

规则

基础示例

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

Props 配置示例

静态选项

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

远程搜索

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

Events 事件示例

监听输入和选择

const rule = {
    type: "autoComplete",
    title: "商品名称",
    field: "product",
    value: "",
    props: {
        data: [
            { value: "iPhone 15 Pro" },
            { value: "MacBook Pro" },
        ],
        placeholder: "请输入或选择商品",
    },
    on: {
        change: (value) => {
            console.log('输入值改变:', value);
        },
        select: (value) => {
            console.log('选择选项:', value);
        },
        search: (value) => {
            console.log('搜索值:', value);
        },
    },
}

选择后联动更新

const rule = [
    {
        type: "autoComplete",
        title: "商品名称",
        field: "product",
        value: "",
        props: {
            data: [],
            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,
        },
    },
]

完整配置项:arco-design_AutoComplete

value :String

Props

参数名	描述	类型	默认值	版本
disabled	是否禁用	boolean	false
data	用于自动提示的数据	Option[]	[]
popup-container	弹出框的挂载容器	string | HTMLElement | null | undefined	-
strict	是否为严格校验模式	boolean	false
filter-option	自定义选项过滤方法	FilterOption	true
trigger-props	trigger 组件属性	object	-	2.14.0

Events

事件名	描述	参数
change	绑定值发生改变时触发	value: string
search	用户搜索时触发	value: string
select	选择选项时触发	value: string