Auto-Complete

The Autocomplete component provides an enhanced input field with autocomplete functionality using Material-UI's Autocomplete component. It supports single and multiple selections, custom options, and additional actions.

Schema

[
    {
        "name": "movies",
        "meta": {
            "displayType": "autocomplete",
            "displayName": "Favorite movies",
            "value": [],
            "readOnly": true,
            "placeholder": "Select movies you like",
            "description": "Select the movies you like",
            "config": {
                "multiple": true,
                "limitTags": 2
            },
            "validation": {
                "required": true
            },
            "htmlProps": {
                "allowDynamic": true
            },
            "options": [
                { "label": "The Shawshank Redemption", "value": 1994 },
                { "label": "The Godfather", "value": 1972 },
                { "label": "The Godfather: Part II", "value": 1974 },
                { "label": "The Dark Knight", "value": 2008 },
                { "label": "12 Angry Men", "value": 1957 },
                { "label": "Schindler's List", "value": 1993 },
                {
                    "label": "The Lord of the Rings: The Return of the King",
                    "value": 2003
                },
                { "label": "The Good, the Bad and the Ugly", "value": 1966 },
                { "label": "Fight Club", "value": 1999 },
                {
                    "label": "The Lord of the Rings: The Fellowship of the Ring",
                    "value": 2001
                }
            ]
        }
    }
]

Example

Form Data:

{}

props

`meta` object

The meta object contains properties that define the display characteristics and behavior of the section.

Name	Description	Type
`name`	The unique identifier for the checkbox control instance.	string
`displayName`	The name to display as the section header	string
`description`	A description text to display under the header	string
`displayProps`	Additional properties to control display settings	object
`validation`	Validation rules for the section	object
`options`	The options to display in the dropdown	array
`dependencies`	Conditions that must be met for the section to be displayed	object
`value`	The default values for the autocomplete field	string
`isDisabled`	Whether the field is disabled	boolean
`className`	Additional CSS class names to apply to the section	string
`config`	Additional configuration for the autocomplete field	object
`readOnly`	A readonly field is not editable and value cannot be changed	boolean
`htmlProps`	Custom properties to apply to the component	object

`config` Object

Name	Description	Type
`multiple`	Allow users to select multiple options	boolean
`limitTags`	The maximum number of tags to allow. Defaults to 3 if not specified	integer

`htmlProps` Object

Name	Description	Type
`showAddNew`	show add new button as right label element	boolean
`allowDynamic`	Enable Static or dynamic input for array input	boolean

Common Validation Properties

Field	Description
`required`	Marks a field as mandatory
`pattern`	Adds a pattern validation for the field. For email, pattern is supported by default
`patternDetail`	Contains info msg and error msg for pattern validation property
`min`	For Textbox fields, it is the minimum number of characters required for the field. For number fields, it is the minimum value allowed
`max`	For Textbox fields, it is the maximum number of characters allowed. For number fields, it is the maximum value allowed
`minDetail`	Contains error and info msg for min validation property
`maxDetail`	Contains error and info msg for max validation property
`requiredDetail`	Contains info msgs about the required validation property

Example JSON

Autocomplete with multiple selections

[
    {
        "name": "movies",
        "meta": {
            "displayType": "autocomplete",
            "displayName": "",
            "value": [],
            "placeholder": "Select movies you like",
            "description": "Select the movies you like",
            "config": {
                "multiple": true,
                "limitTags": 3
            },
            "options": [
                { "label": "The Shawshank Redemption", "value": 1994 },
                { "label": "The Godfather", "value": 1972 },
                { "label": "The Godfather: Part II", "value": 1974 },
                { "label": "The Dark Knight", "value": 2008 },
                { "label": "12 Angry Men", "value": 1957 },
                { "label": "Schindler's List", "value": 1993 },
                {
                    "label": "The Lord of the Rings: The Return of the King",
                    "value": 2003
                },
                { "label": "The Good, the Bad and the Ugly", "value": 1966 },
                { "label": "Fight Club", "value": 1999 },
                {
                    "label": "The Lord of the Rings: The Fellowship of the Ring",
                    "value": 2001
                }
            ]
        }
    }
]

Autocomplete with single selection

[
    {
        "name": "movies",
        "meta": {
            "displayType": "autocomplete",
            "displayName": "",
            "value": 1994,
            "placeholder": "Select a movie",
            "description": "Select the movie you like",
            "config": {
                "multiple": false
            },
            "options": [
                { "label": "The Shawshank Redemption", "value": 1994 },
                { "label": "The Godfather", "value": 1972 },
                { "label": "The Godfather: Part II", "value": 1974 },
                { "label": "The Dark Knight", "value": 2008 }
            ]
        }
    }
]

Autocomplete with dependencies

[
    {
        "name": "movies",
        "meta": {
            "displayType": "autocomplete",
            "displayName": "",
            "value": 1994,
            "placeholder": "Select a movie",
            "description": "Select the movie you like",
            "config": {
                "multiple": false
            },
            "options": [
                { "label": "The Shawshank Redemption", "value": 1994 },
                { "label": "The Godfather", "value": 1972 },
                { "label": "The Godfather: Part II", "value": 1974 },
                { "label": "The Dark Knight", "value": 2008 }
            ],
            "dependencies": {
                "logic": "AND",
                "conditions": [
                    {
                        "field": "name",
                        "operator": "NOT_EMPTY"
                    }
                ]
            }
        }
    }
]

Autocomplete with validation

[
    {
        "name": "movies",
        "meta": {
            "displayType": "autocomplete",
            "displayName": "",
            "value": 1994,
            "placeholder": "Select a movie",
            "description": "Select the movie you like",
            "config": {
                "multiple": false
            },
            "options": [
                { "label": "The Shawshank Redemption", "value": 1994 },
                { "label": "The Godfather", "value": 1972 },
                { "label": "The Godfather: Part II", "value": 1974 },
                { "label": "The Dark Knight", "value": 2008 }
            ],
            "validation": {
                "required": true,
                "requiredDetail": { "errorMsg": "Movie is a required field" }
            }
        }
    }
]

Autocomplete with disabled field

[
    {
        "name": "movies",
        "meta": {
            "displayType": "autocomplete",
            "displayName": "",
            "value": 1994,
            "placeholder": "Select a movie",
            "description": "Select the movie you like",
            "config": {
                "multiple": false
            },
            "options": [
                { "label": "The Shawshank Redemption", "value": 1994 },
                { "label": "The Godfather", "value": 1972 },
                { "label": "The Godfather: Part II", "value": 1974 },
                { "label": "The Dark Knight", "value": 2008 }
            ],
            "isDisabled": true
        }
    }
]

Schema​

props​

meta object​

config Object​

htmlProps Object​

Common Validation Properties​

Example JSON​

Autocomplete with multiple selections​

Autocomplete with single selection​

Autocomplete with dependencies​

Autocomplete with validation​

Autocomplete with disabled field​