AutoComplete 自动完成

规则

基础示例

const rule = {
    type: "autoComplete",
    title: "自动完成",
    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 配置示例

远程搜索

const rule = {
    type: "autoComplete",
    title: "商品搜索",
    field: "product",
    inject: true,
    props: {
        placeholder: "请输入商品名称",
        allowClear: true,
        search: function (inject, value) {
            if (value) {
                // 调用远程搜索接口
                searchProducts(value).then(res => {
                    inject.self.props.options = res.data.map(item => ({
                        value: item.name,
                        id: item.id
                    }));
                });
            } else {
                inject.self.props.options = [];
            }
        }
    },
}

自定义选项

const rule = {
    type: "autoComplete",
    title: "用户搜索",
    field: "username",
    inject: true,
    props: {
        placeholder: "请输入用户名",
        search: function (inject, value) {
            inject.self.props.options = [
                {value: value + '1', label: value + '1'},
                {value: value + '2', label: value + '2'},
            ];
        }
    },
}

Events 事件示例

监听选择变化

const rule = {
    type: "autoComplete",
    title: "商品搜索",
    field: "product",
    inject: true,
    props: {
        placeholder: "请输入商品名称",
        search: function (inject, value) {
            inject.self.props.options = [
                {value: value + '1'},
                {value: value + '2'},
            ];
        },
    },
    on: {
        select: (value, option) => {
            console.log('选择建议项:', value, option);
        },
        change: (value) => {
            console.log('输入值改变:', value);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
        search: (value) => {
            console.log('搜索:', value);
        },
    },
}

选择后填充详细信息

const rule = [
    {
        type: "autoComplete",
        title: "商品搜索",
        field: "product",
        inject: true,
        props: {
            placeholder: "请输入商品名称",
            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) => {
                // 选择商品后，自动填充价格
                if (option.price) {
                    $inject.api.setValue('price', option.price);
                }
            },
        },
    },
    {
        type: "input-number",
        title: "价格",
        field: "price",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Ant-design-vue_AutoComplete

value :String

Props

参数	说明	类型	默认值
allowClear	支持清除, 单选模式有效	boolean	false
autofocus	自动获取焦点	boolean	false
backfill	使用键盘选择选项的时候把选中项回填到输入框中	boolean	false
bordered	是否有边框	boolean	true
clearIcon	使用插槽自定义清除按钮	slot	<CloseCircleFilled />
default (自定义输入框)	自定义输入框	slot	<Input />
defaultActiveFirstOption	是否默认高亮第一个选项。	boolean	true
defaultOpen	是否默认展开下拉菜单	boolean	-
disabled	是否禁用	boolean	false
popupClassName	下拉菜单的 className 属性	string	-
dropdownMatchSelectWidth	下拉菜单和选择器同宽。默认将设置 min-width，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动	boolean | number	true
dropdownMenuStyle	dropdown 菜单自定义样式	object
filterOption	是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。	boolean or function(inputValue, option)	true
open	是否展开下拉菜单	boolean	-
option	通过 option 插槽，自定义节点	v-slot:option="{value, label, [disabled, key, title]}"	-
options	自动完成的数据源	DataSourceItemType[]
placeholder	输入框提示	string | slot	-
status	设置校验状态	'error' | 'warning'	-

Events

事件名称	说明	回调参数
blur	失去焦点时的回调	function()
change	选中 option，或 input 的 value 变化时，调用此函数	function(value)
dropdownVisibleChange	展开下拉菜单的回调	function(open)
focus	获得焦点时的回调	function()
search	搜索补全项的时候调用	function(value)
select	被选中时调用，参数为选中项的 value 值	function(value, option)
clear	清除内容时回调	function