AutoComplete

Rules

Basic Example

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

Props Configuration Examples

Remote Search

const rule = {
    type: "autoComplete",
    title: "Product Search",
    field: "product",
    props: {
        placeholder: "Enter product name",
        fetchSuggestions: function (queryString, cb) {
            // Call remote search API
            if (queryString) {
                searchProducts(queryString).then(res => {
                    cb(res.data.map(item => ({
                        value: item.name,
                        id: item.id
                    })));
                });
            } else {
                cb([]);
            }
        },
        clearable: true,
    },
}

Custom Suggestions

const rule = {
    type: "autoComplete",
    title: "User Search",
    field: "username",
    props: {
        placeholder: "Enter username",
        valueKey: "name",
        fetchSuggestions: function (queryString, cb) {
            cb([
                {name: queryString + '1', id: 1},
                {name: queryString + '2', id: 2},
            ]);
        },
    },
}

Debounce Delay

const rule = {
    type: "autoComplete",
    title: "Search Keyword",
    field: "keyword",
    props: {
        placeholder: "Enter keyword",
        debounce: 500,
        fetchSuggestions: function (queryString, cb) {
            // Execute search after 500ms delay
            cb([
                {value: queryString + 'Related Result 1'},
                {value: queryString + 'Related Result 2'},
            ]);
        },
    },
}

Events Examples

Listen to Changes

const rule = {
    type: "autoComplete",
    title: "Product Search",
    field: "product",
    props: {
        placeholder: "Enter product name",
        fetchSuggestions: function (queryString, cb) {
            cb([
                {value: queryString + '1'},
                {value: queryString + '2'},
            ]);
        },
    },
    on: {
        select: (item) => {
            console.log('Selected suggestion:', item);
        },
        change: (value) => {
            console.log('Input value changed:', value);
        },
        blur: (event) => {
            console.log('Lost focus:', event);
        },
        focus: (event) => {
            console.log('Gained focus:', event);
        },
        clear: () => {
            console.log('Input cleared');
        },
    },
}

Fill Details After Selection

const rule = [
    {
        type: "autoComplete",
        title: "Product Search",
        field: "product",
        props: {
            placeholder: "Enter product name",
            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) => {
                // Auto-fill price from selected product
                if (item.price) {
                    $inject.api.setValue('price', item.price);
                }
            },
        },
    },
    {
        type: "input-number",
        field: "price",
        title: "Price",
        props: {
            disabled: true,
        },
    },
]

Complete configuration items: Element_AutoComplete

value :String

Props

Property Name	Description	Type	Default Value
placeholder	Placeholder text	string	—
clearable	Whether it can be cleared	boolean	false
disabled	Whether AutoComplete component is disabled	boolean	false
valueKey	Key name used for display in input suggestion object	string	value
debounce	Debounce delay for getting input suggestions, in milliseconds	number	300
placement	Menu popup position	enum	bottom-start
fetchSuggestions	Method for getting input suggestions, only when your input suggestion data resolves, return it by calling callback(data:[])	Array / Function	—
triggerOnFocus	whether show suggestions when input focus	boolean	true
selectWhenUnmatched	In case input has no matching suggestions, whether pressing Enter triggers select event	boolean	false
name	Equivalent to native input name attribute	string	—
ariaLabel	Native aria-label attribute	string	—
hideLoading	Whether to hide loading icon when loading remotely	boolean	false
popperClass	Class name of dropdown list	string	—
teleported	Whether to insert dropdown list element under element pointed by append-to	boolean	true
appendTo	Which DOM element the dropdown is mounted to	CSSSelector / HTMLElement	—
highlightFirstItem	Whether to highlight first item of remote search results by default	boolean	false
fitInputWidth	Whether dropdown width is the same as input box	boolean	false

Events

Event Name	Details	Type
blur	Triggered when selector input loses focus	Function
focus	Triggered when selector input gains focus	Function
input	Triggered when Input value changes	Function
clear	Triggered when clicking clear button generated by clearable attribute	Function
select	Triggered when clicking to select suggestion	Function
change	Triggered when Input value changes	Function

Slots

Slot Name	Description	Type
default	Custom input suggestion content	object
prefix	Input header content	-
suffix	Input footer content	-
prepend	Input prepend content, before prefix	-
append	Input append content, after suffix	-
loading	Modify loading area content	-