How to make friends Yii2 + Select2 + Select2-multi-checkboxes?

Question

Yii

The task is following, it is necessary that in selecte of the form there was an opportunity of a choice of several values ​​and there was a fast search. Select2 can do all this, but the design goes after selecting more than one value, the plugin https://github.com/wasikuss/select2-multi-checkboxes is great and it does not expand the field in height if several values ​​are selected. writes the number of selected elements at once in the first field, and not in the form of tags in width.

How to make friends Yii2 + Select2 with the select2-multi-checkboxes plugin?

Answer 1

That's because as an option, we add to the 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 );