CoreUI Form

Get Started
Examples
Options
Methods

Get started

Download

You can download a minimized version of the library or get the full source code at github.com.

Download source

Install with npm

$ npm install coreui-form-field-select2

Зависимости

Для корректной работы на странице необходимо наличие:

Дополнительно

Другие примеры и более детальные настройки можно найти в документации select2.org

Examples

Single select


    <div id="single-select"></div>

    <script>
        let options = [
            '--',
            'Reactive',
            'Solution',
            'Conglomeration',
            'Algoritm',
            'Holistic',
        ];

        CoreUI.form.create({
            send    : {
                url   : '/path/to/object/1',
                method: 'post'
            },
            record  : {
                select_field: null
            },
            fields  : [
                {
                    type: 'select2', name: 'select_field', label: 'Select', width: 250, options: options, select2: {
                        placeholder: 'Choose one thing',
                    }
                },
            ],
            onSubmit: function (form, data) {
                alert(JSON.stringify(data));
                return false;
            },
            controls: [
                {type: "submit", content: "Send"},
            ],
        }).render('single-select');
    </script>

Multiple select


    <div id="multiple-select"></div>

    <script>
        let multipleOptions = [
            { value: 'Reactive',       text: 'Reactive' },
            { value: 'Solution',       text: 'Solution' },
            { value: 'Conglomeration', text: 'Conglomeration' },
            { value: 'Algoritm',       text: 'Algoritm' },
            { value: 'Holistic',       text: 'Holistic' },
        ];

        CoreUI.form.create({
            send    : {
                url   : '/path/to/object/1',
                method: 'post'
            },
            record  : {
                select_field: [ 'Reactive', 'Algoritm' ]
            },
            fields  : [
                {
                    type: 'select2', name: 'select_field', label: 'Select', width: 250, attr: { multiple: "multiple" },
                    options: multipleOptions
                },
            ],
            onSubmit: function (form, data) {
                alert(JSON.stringify(data));
                return false;
            },
            controls: [
                {type: "submit", content: "Send"},
            ],
        }).render('multiple-select');
    </script>

Groups


    <div id="groups"></div>

    <script>
        let groupOptions = [
            { value: '', text: 'No value' },
            { type: "group", label: 'Group 1',
                options : [
                    { value: 1, text: 'Adams John' },
                    { value: 2, text: 'Johnson Peter' },
                ]
            },
            { type: "group", label: 'Group 2', attr: { class: "group-class"  },
                options : [
                    { value: 3, text: 'Lewis Frank' },
                    { value: 4, text: 'Cruz Steve' },
                    { value: 5, text: 'Donnun Nick' }
                ]
            }
        ];

        CoreUI.form.create({
            send    : {
                url   : '/path/to/object/1',
                method: 'post'
            },
            record  : {
                select_field: null
            },
            fields  : [
                {
                    type: 'select2', name: 'select_field', label: 'Select', width: 400, attr: { multiple: "multiple" },
                    options: groupOptions
                },
            ],
            onSubmit: function (form, data) {
                alert(JSON.stringify(data));
                return false;
            },
            controls: [
                {type: "submit", content: "Send"},
            ],
        }).render('groups');

    </script>

Dynamic options


    <div id="dynamic-select"></div>

    <script>
        let dynamicOptions = [
            { value: 'Reactive',       text: 'Reactive' },
            { value: 'Solution',       text: 'Solution' },
            { value: 'Conglomeration', text: 'Conglomeration' },
            { value: 'Algoritm',       text: 'Algoritm' },
            { value: 'Holistic',       text: 'Holistic' },
        ];

        CoreUI.form.create({
            send    : {
                url   : '/path/to/object/1',
                method: 'post'
            },
            record  : {
                select_field: null
            },
            fields  : [
                {
                    type: 'select2', name: 'select_field', label: 'Select', width: 250, attr: { multiple: "multiple" },
                    options: dynamicOptions,
                    select2: {
                        placeholder: 'Write your value',
                        tags: true,
                        tokenSeparators: [',', ' ']
                    }
                },
            ],
            onSubmit: function (form, data) {
                alert(JSON.stringify(data));
                return false;
            },
            controls: [
                {type: "submit", content: "Send"},
            ],
        }).render('dynamic-select');
    </script>

Validation


    <div id="validation"></div>

    <script>
        let validationOptions = {
            '' : '--',
            'Reactive' : 'Reactive',
            'Solution' : 'Solution',
            'Conglomeration' : 'Conglomeration',
            'Algoritm' : 'Algoritm',
            'Holistic' : 'Holistic',
        };

        CoreUI.form.create({
            send    : {
                url   : '/path/to/object/1',
                method: 'post'
            },
            validate: true,
            record  : {
                select_field: null
            },
            fields  : [
                {
                    type: 'select2', name: 'select_field', label: 'Select', width: 250, required: true,
                    invalidText: 'SELECT Value!!!',
                    options: validationOptions,
                    select2: {
                        placeholder: 'Submit form for validation',
                    }
                },
            ],
            onSubmit: function (form, data) {
                alert(JSON.stringify(data));
                return false;
            },
            controls: [
                {type: "submit", content: "Send"},
            ],
        }).render('validation');
    </script>

Autocomplete


    <div id="autocomplete"></div>

    <script>
        CoreUI.form.create({
            send    : {
                url   : '/path/to/object/1',
                method: 'post'
            },
            record  : {
                select_field: null
            },
            fields  : [
                {
                    type: 'select2', name: 'select_field', label: 'Select', width: 300,
                    select2: {
                        minimumInputLength: 1,
                        ajax: {
                            url: 'data/autocomplete.json', // https://select2.org/data-sources/formats
                            dataType: 'json'
                        }
                    }
                },
            ],
            onSubmit: function (form, data) {
                alert(JSON.stringify(data));
                return false;
            },
            controls: [
                {type: "submit", content: "Send"},
            ],
        }).render('autocomplete');
    </script>

Options field

Name	type	default	description
name	string		Имя поля, которое будет использоваться для получения и отправки значения
label	string		Название поля. Указанный текст будет находиться радом с полем
labelWidth	string\|number		Ширина названия поля. Может быть указана текстом или цифрой. Например `150px` или `150`
width	string\|number		Ширина поля. Может быть указана текстом или цифрой. Например `250px` или `250`
description	string		Описанием поля в виде текста под названием
descriptionHelp	string		Описанием поля в виде иконки рядом названием. Текст описания располагается при наведении
invalidText	string		Текст с описанием ошибки, который появляется при валидации
validText	string		Текст с описанием правильного выбора, который появляется при валидации
fields	Array		Список других полей, которые будут добавлены рядом текущем полем
attr	object		Набор атрибутов задаваемых для поля
readonly	bool	false	Признак для отображения поля в виде только для чтения
required	bool	false	Признак, что поле является обязательным
show	bool	true	Признак, что поле должно быть показано на форме
position	string		Название позиции на форме, где должно быть показано поле. Позиции указываются в шаблоне формы
noSend	bool	false	Признак, что поля не требуется отправлять на сервер
options	Array\|Object		Список возможных значений для поля
select2	Object		Настройки для поля select2. Варианты значений можно найти в документации

Methods field

Method	Return	Description
`let field = CoreUI.form.getField( name )`	class	Получение ранее созданного экземпляра поля по его имени
`field.getId()`	string	Получение id поля
`field.getContentId()`	string	Получение id контейнера поля
`field.getOptions()`	object	Получение настроек поля
`field.show( duration )`		Отображение поля
`field.hide( duration )`		Скрытие поля
`field.readonly( isReadonly )`		Изменение режима поля только для чтения
`field.getValue()`	array\|string	Получение значения из поля
`form.setValue( value )`		Установка значения в поле
`field.validate( isValid, text )`	array\|string	Установка валидности поля
`field.isValid( isValid, text )`	boolean\|null	Проверка валидности поля
`field.isAlloySend( isValid, text )`	boolean	Проверка на то, что поле можно отправлять
`field.renderContent()`		Формирование контента поля