Auto Complete Form Control (v1.11+)

Show auto complete with database data

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: 'Person',
                control: T.EDBMasterFormControl.auto_complete,
                path: 'person_id',
                autocompleteSettings: {
                    showClear: true,

                    dataSource: 'db_data',
                    dbData: { // Optional, it can pickup instance,database,collection details from schema.
                        collection: 'persons',
                        select: 'person_name, mobile_no, _id'
                    },
                    optionLabel: 'person_name', // 👈 It will be displayed in UI and saved in db, HTML supported

                    filter: true,
                    filterBy: 'person_name,mobile_no,_id',
                    // filterBy: 'person_name',
                    filterMatchMode: 'contains',
                    // virtualScroll: false,
                    alwaysGetLatestDataOnFormOpen: true,
                },
                validations: {
                    required: true,
                }
            }]
        ]
    }
};

Show static data

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: 'Gender',
                control: T.EDBMasterFormControl.auto_complete,
                path: 'gender',
                autocompleteSettings: {
                    showClear: true,

                    dataSource: 'static_data',
                    staticData: [{
                        label: 'Male', // Shown In UI
                        data: 'some other property data 1',
                    }, {
                        label: 'Female',
                        data: 'some other property data 1',
                    }],
                    optionLabel: 'label', // 👈 It will be displayed in UI and saved in db, HTML supported

                    filterBy: 'label',
                    filterMatchMode: 'contains',
                },
                validations: {
                    required: true,
                }
            }],
        ]
    }
};

Show data from custom API

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: 'Cities',
                control: T.EDBMasterFormControl.auto_complete,
                path: 'city_id',

                autocompleteSettings: {
                    dataSource: 'api_call',
                    optionLabel: 'city_name',
                    apiCallOverrides: {
                        // :userPath = it will be replaced with admin user path by master page automatically.
                        // :beHostPort = it will be replaced with API Maker backend's protocol and host and port automatically. ex : https://example.com
                        // url: ':beHostPort/api/custom-api/:userPath/list-of-cities', // 👈 Use this to make it dynamic
                        url: 'http://localhost:38246/api/custom-api/admin/list-of-cities',
                    },
                    jsCode: [{
                        appendTo: T.EDBMasterAutoCompleteAppendTo.modifyAutoCompleteRequest,
                        code: `
                            reqBody.state_id = formData.state_id;
                            console.log(body);
                        `
                    }],
                },
            }]
        ]
    }
};

Add new item support

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: 'Product Categories',
                control: T.EDBMasterFormControl.auto_complete,
                path: 'product_category_id',
                autocompleteSettings: {
                    showClear: true,

                    dataSource: 'db_data',
                    dbData: {
                        collection: 'product_categories',
                        select: 'name'
                    },
                    optionLabel: 'name',

                    addNewFormConfig: { // 👈 Opens add product category & saves & reloads auto complete
                        screenName: 'Product Category',
                        form: {
                            width: '500px',
                            fields: [
                                [{ // field
                                    label: 'Name',
                                    control: T.EDBMasterFormControl.input,
                                    path: 'name',
                                }]
                            ]
                        }
                    }
                },
                validations: {
                    required: true,
                }
            }],
        ]
    }
};

Interface Documentation

autocompleteSettings_generated