Select2 - Always a popup menu, not a popup menu

Question

How to make select2 always dropdown and never drop out?

I tried this solution, but it does not work: It does not work

$("#e1").select2()
.on('select2-open', function() {

// however much room you determine you need to prevent jumping
        var requireHeight = 600;
        var viewportBottom = $(window).scrollTop() + $(window).height();

        // figure out if we need to make changes
        if (viewportBottom < requireHeight) 
        {           
            // determine how much padding we should add (via marginBottom)
            var marginBottom = requireHeight - viewportBottom;

            // adding padding so we can scroll down
            $(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");

            // animate to just above the select2, now with plenty of room below
            $('html, body').animate({
                scrollTop: $("#e1").offset().top - 10
            }, 1000);
        }
    });

jsFiddle

Answer 1

This worked for me:

$.fn.select2.amd.require([
  'select2/selection/multiple',
  'select2/selection/search',
  'select2/dropdown',
  'select2/dropdown/attachContainer',
  'select2/dropdown/closeOnSelect',
  'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachContainer, CloseOnSelect, Utils) {
  var SelectionAdapter = Utils.Decorate(
    MultipleSelection,
    Search
  );

  var DropdownAdapter = Utils.Decorate(
    Utils.Decorate(
      Dropdown,
      CloseOnSelect
    ),
    AttachContainer
  );

  $('#e1').select2({
    dropdownAdapter: DropdownAdapter
  });
});

jsFiddle