Как подружить Yii2 + Select2 + Select2-multi-checkboxes?

Question

[Alex]

Задача стоит следующая, нужно чтобы в selecte формы была возможность выбора нескольких значений и был быстрый поиск. Select2 это всё умеет, но едет дизайн после выбора более чем одного значения, отлично подходит плагин https://github.com/wasikuss/select2-multi-checkboxes и он не расширяет поле по высоте если выбрано несколкьо значений т.к. прописывает количество выбранных элементов сразу в первом поле, а не в виде тегов по ширине.

Как правильно подружить Yii2 + Select2 с плагином select2-multi-checkboxes?

Comments

[Dmitry Bay]

у картика же select2 отличный всю жизнь был.

[Alex]

Dmitry Bay, Спорно))) Нет возможности например из коробки выбора отображения стиля тегов. А базово он выводится так себе, не всем подходит.

[Dmitry Bay]

Александр, темы на select2 накатываете и все.

Не забывайте, это лишь оболочки над select2, все тоже самое кастомное вы можете руками собрать и без помощи виджетов.

[Alex]

Dmitry Bay, Как накатить тему и где их взять? Я гугл минут 20 напрягал ничего путёвого не нашёл конкретно для моей задачи кроме Select2-multi-checkboxes

Answer 1

[Александр]

Вот так как вариант, в view добавляем:

$this->registerJsFile('/js/select2.multi-checkboxes.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$js = <<<JS
    $.fn.select2.amd.require([
        'select2/selection/single',
        'select2/selection/placeholder',
        'select2/selection/allowClear',
        'select2/dropdown',
        'select2/dropdown/search',
        'select2/dropdown/attachBody',
        'select2/utils'
    ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {
        var SelectionAdapter = Utils.Decorate(
            SingleSelection,
            Placeholder
        );
        SelectionAdapter = Utils.Decorate(
            SelectionAdapter,
            AllowClear
        );
        var DropdownAdapter = Utils.Decorate(
            Utils.Decorate(
                Dropdown,
                DropdownSearch
            ),
            AttachBody
        );
        var base_element = $('.select2-multiple');
        $(base_element).each(function (index, value){
            var this_select = $(this);
            $(this_select).select2({
                theme: "bootstrap4",
                placeholder: 'Выбрать',
                selectionAdapter: SelectionAdapter,
                dropdownAdapter: DropdownAdapter,
                allowClear: true,
                templateResult: function (data) {
                    if (!data.id) { return data.text; }
                    var res = $('<div></div>');
                    res.text(data.text);
                    res.addClass('wrap');
                    return res;
                },
                templateSelection: function (data) {
                    if (!data.id) { return data.text; }
                    var selected = ($(this_select).val() || []).length;
                    var total = $('option', $(this_select)).length;
                    return "Выбрано " + selected + " из " + total;
                }
            })
        });
    });
JS;
$this->registerJs( $js, $position = yii\web\View::POS_END, $key = null );

Comments

[Александр]

POS_END на POS_LOAD лучше заменить. Так правильней будет.