common.js

(function(){
  console.log('Common Module Started');

  // Custom Multiple Selection Adapter
  $.fn.select2.amd.define("CustomSelectionAdapter", [
      "select2/utils",
      "select2/selection/multiple",
      "select2/selection/placeholder",
      "select2/selection/eventRelay",
      "select2/selection/single"
  ],
    function (Utils, MultipleSelection, Placeholder, EventRelay, SingleSelection) {

        // Decorates MultipleSelection with Placeholder
        let adapter = Utils.Decorate(MultipleSelection, Placeholder);
        // Decorates adapter with EventRelay - ensures events will continue to fire
        // e.g. selected, changed
        adapter = Utils.Decorate(adapter, EventRelay);

        adapter.prototype.render = function () {
            // Use selection-box from SingleSelection adapter
            // This implementation overrides the default implementation
            let $selection = SingleSelection.prototype.render.call(this);

            return $selection;
        };

        adapter.prototype.update = function (data) {
            // copy and modify SingleSelection adapter
            this.clear();

            let $rendered = this.$selection.find('.select2-selection__rendered');
            let noItemsSelected = data.length === 0;
            let formatted = "";

            if (noItemsSelected) {
                formatted = this.options.get("placeholder") || "";
            } else {
                let itemsData = {
                    selected: data || [],
                    all: this.$element.find("option") || []
                };
                //console.log(itemsData.all);
                // Pass selected and all items to display method
                // which calls templateSelection
                formatted = this.display(itemsData, $rendered);
            }
            $rendered.empty().append(formatted);
            $rendered.prop('title', formatted);
        };

        return adapter;
    });

  // Custom Search Adapter
  $.fn.select2.amd.define("CustomDropdownAdapter", [
      "select2/utils",
      "select2/dropdown",
      "select2/dropdown/attachBody",
      "select2/dropdown/attachContainer",
      "select2/dropdown/search",
      "select2/dropdown/minimumResultsForSearch",
      "select2/dropdown/closeOnSelect"
  ],
  function (Utils, Dropdown, AttachBody, AttachContainer, Search, MinimumResultsForSearch, CloseOnSelect) {

      // Decorate Dropdown with Search functionalities
      let dropdownWithSearch = Utils.Decorate(Dropdown, Search);
      dropdownWithSearch.prototype.render = function () {
          //console.log(this);
          // Copy and modify default search render method
          var $rendered = Dropdown.prototype.render.call(this);

          // Add ability for a placeholder in the search box
          let placeholder = this.options.get("placeholderForSearch") || "";
          var $search = $(
              '<span class="select2-search select2-search--dropdown">' +
              '<input class="select2-search__field" placeholder="' + placeholder + '" type="search"' +
              ' tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off"' +
              ' spellcheck="false" role="box" />' +
              '</span>'
          );

          this.$searchContainer = $search;
          this.$search = $search.find('input');

          $rendered.prepend($search);
          return $rendered;
      };

      // Decorate the dropdown+search with necessary containers
      let adapter = Utils.Decorate(dropdownWithSearch, AttachContainer);
      adapter = Utils.Decorate(adapter, AttachBody);

      return adapter;
  });


	$.Common = {
    // 'renderInitialData': function () {
    //   var payload = {};
    //
    //   $.ajax({
    //     url: 'http://localhost:3000/employees',
    //     dataType: 'json',
    //     type: 'GET',
    //     data: payload,
    //     success: function (payload) {
    //       //console.log(payload);
    //       // $.each(payload, function (k, v) {
    //       //   console.log(payload[k])
    //       // });
    //     }
    //   });
    // },
    fetchAPIData: function(query, method, endpoint) {
        // Return the $.ajax promise
        return $.ajax({
            data: query,
            dataType: 'json',
            type: method,
            url: endpoint
        });
    },
    'renderSingleSelect': function (targetElement, data) {
      $(targetElement).select2({
        width: '100%',
        data: data,
        minimumResultsForSearch: -1 // disable search utility
      });
    },
    'renderMultiSelect': function (targetElement, data, label) {
      $(targetElement).select2({
        width: '100%',
        data: data,
        placeholder: 'Please select an option',
        placeholderForSearch: "Search for " + label,
        closeOnSelect: false,
        allowClear: true,
        selectionAdapter: $.fn.select2.amd.require("CustomSelectionAdapter"),
        templateSelection: (data) => {
          //console.log(data);
          return `${data.selected.length} options selected`;
        },
        dropdownAdapter: $.fn.select2.amd.require("CustomDropdownAdapter")
      });
    },
    renderedSelectOptions: [],
	};

})(window);