AutoComplete 自动完成

规则

基础示例

const rule = {
    type: "autoComplete",
    title: "自动完成",
    field: "auto",
    value: "xaboy",
    props: {
    	fetchSuggestions: function (queryString, cb) {
			cb([
				{value: queryString}, {value: queryString + queryString}
			]);
		}
	}
}

Props 配置示例

远程搜索

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

自定义建议项

const rule = {
    type: "autoComplete",
    title: "用户搜索",
    field: "username",
    props: {
        placeholder: "请输入用户名",
        valueKey: "name",
        fetchSuggestions: function (queryString, cb) {
            cb([
                {name: queryString + '1', id: 1},
                {name: queryString + '2', id: 2},
            ]);
        },
    },
}

防抖延迟

const rule = {
    type: "autoComplete",
    title: "搜索关键词",
    field: "keyword",
    props: {
        placeholder: "请输入关键词",
        debounce: 500,
        fetchSuggestions: function (queryString, cb) {
            // 延迟500ms后执行搜索
            cb([
                {value: queryString + '相关结果1'},
                {value: queryString + '相关结果2'},
            ]);
        },
    },
}

Events 事件示例

监听选择变化

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

选择后填充详细信息

const rule = [
    {
        type: "autoComplete",
        title: "商品搜索",
        field: "product",
        props: {
            placeholder: "请输入商品名称",
            fetchSuggestions: function (queryString, cb) {
                cb([
                    {value: 'iPhone 15', id: 1, price: 5999},
                    {value: 'MacBook Pro', id: 2, price: 12999},
                ]);
            },
        },
        inject: true,
        on: {
            select: ($inject, item) => {
                // 选择商品后，自动填充价格
                if (item.price) {
                    $inject.api.setValue('price', item.price);
                }
            },
        },
    },
    {
        type: "input-number",
        field: "price",
        title: "价格",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Element_AutoComplete

value :String

Props

属性名	说明	类型	默认值
placeholder	占位文本	string	—
clearable	是否可清空	boolean	false
disabled	自动补全组件是否被禁用	boolean	false
valueKey	输入建议对象中用于显示的键名	string	value
debounce	获取输入建议的防抖延时，单位为毫秒	number	300
placement	菜单弹出位置	enum	bottom-start
fetchSuggestions	获取输入建议的方法， 仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它	Array / Function	—
triggerOnFocus	whether show suggestions when input focus	boolean	true
selectWhenUnmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件	boolean	false
name	等价于原生 input name 属性	string	—
ariaLabel	原生 aria-label属性	string	—
hideLoading	是否隐藏远程加载时的加载图标	boolean	false
popperClass	下拉列表的类名	string	—
teleported	是否将下拉列表元素插入 append-to 指向的元素下	boolean	true
appendTo	下拉框挂载到哪个 DOM 元素	CSSSelector / HTMLElement	—
highlightFirstItem	是否默认高亮远程搜索结果的第一项	boolean	false
fitInputWidth	下拉框的宽度是否与输入框相同	boolean	false

Events

事件名	详情	类型
blur	当选择器的输入框失去焦点时触发	Function
focus	当选择器的输入框获得焦点时触发	Function
input	在 Input 值改变时触发	Function
clear	在点击由 clearable 属性生成的清空按钮时触发	Function
select	点击选中建议项时触发	Function
change	在 Input 值改变时触发	Function

Slots

插槽名	描述说明	类型
default	自定义输入建议的内容。	object
prefix	输入框头部内容	-
suffix	输入框尾部内容	-
prepend	输入框前置内容，在 prefix 之前	-
append	输入框后置内容，在 suffix 之后	-
loading	修改加载区域内容	-