In my project I’m using select2 for single selection and multiple selection dropdowns. I would like to extend only the MultipleSelection adapter for select2.

Inside my js file i have:

selectElement.select2({
  placeholder: options.placeholder,
  multiple: options.multiSelect,
  closeOnSelect: !options.multiSelect,
  maximumSelectionLength: options.maxSelections,
  selectionAdapter: $.fn.select2.amd.require("multipleSelectionAdapter")
});

and my custom adapter looks like:

$.fn.select2.amd.define("multipleSelectionAdapter", [
    "jquery",
    "select2/utils",
    "select2/selection/base",
    "select2/selection/eventRelay"
],
function ($, BaseSelection, EventRelay, Utils)
{
    function CustomSelection ($element, options)
    {
        CustomSelection.__super__.constructor.apply(this, arguments);

        this.options = options;
    }

    Utils.Extend(CustomSelection, BaseSelection);

    CustomSelection.prototype.selectionContainer = function () {
        var $container = $(
            '<li class="select2-custom-selection__choice">' +
            '<span class="select2-custom-selection__text"></span>' +
            '<button class="select2-custom-selection__btn--remove"><span class="select2-custom-selection__icon"></span></button>' +
            '</li>'
        );

        return $container;
    };

    return Utils.Decorate(CustomSelection, EventRelay);
});

But this doesn’t work at all…

As of now, I only want to extend the function MultipleSelection.prototype.selectionContainer but keep it open to ev. extend other functions as well…

Thanks for any help