FileMaster

Edit File: select2-init.js

(function($) {
  "use strict"
  
  // single select box
  $("#single-select").select2();

// multi select box
  $('.multi-select').select2();

// dropdown option groups
  $('.dropdown-groups').select2();

//disabling options
  $('.disabling-options').select2();

//disabling a select2 control
  $(".js-example-disabled").select2();
  $(".js-example-disabled-multi").select2();
  $("#js-programmatic-enable").on("click", function () {
      $(".js-example-disabled").prop("disabled", false);
      $(".js-example-disabled-multi").prop("disabled", false);
  });
  $("#js-programmatic-disable").on("click", function () {
      $(".js-example-disabled").prop("disabled", true);
      $(".js-example-disabled-multi").prop("disabled", true);
  });

// select2 with labels
  $(".select2-with-label-single").select2();
  $(".select2-with-label-multiple").select2();

//select2 container width
  $(".select2-width-50").select2();
  $(".select2-width-75").select2();

//select2 themes
  $(".js-example-theme-single").select2({
      theme: "classic"
  });
  $(".js-example-theme-multiple").select2({
      theme: "classic"
  });

//ajax remote data
  $(".js-data-example-ajax").select2({
      width: "100%",
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {
          // parse the results into the format expected by Select2
          // since we are using custom formatting functions we do not need to
          // alter the remote JSON data, except to indicate that infinite
          // scrolling can be used
          params.page = params.page || 1;
    
          return {
            results: data.items,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        },
        cache: true
      },
      placeholder: 'Search for a repository',
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1,
      templateResult: formatRepo,
      templateSelection: formatRepoSelection
    });

// loading array data
  var data = [
      {
          id: 0,
          text: 'enhancement'
      },
      {
          id: 1,
          text: 'bug'
      },
      {
          id: 2,
          text: 'duplicate'
      },
      {
          id: 3,
          text: 'invalid'
      },
      {
          id: 4,
          text: 'wontfix'
      }
  ];
  $(".js-example-data-array").select2({
    data: data
  })

//automatic selection
  $('#automatic-selection').select2({
      selectOnClose: true
  });

//remain open after selection
  $('#remain-open').select2({
      closeOnSelect: false
  });

//dropdown-placement
  $('#dropdown-placement').select2({
      dropdownParent: $('#select2-modal')
  });

// limit the number of selection
  $('#limit-selection').select2({
      maximumSelectionLength: 2
  });

// dynamic option
  $('#dynamic-option-creation').select2({
      tags: true
  });

// tagging with multi value select box
  $('#multi-value-select').select2({
      tags: true
  });

// single-select-placeholder
  $(".single-select-placeholder").select2({
      placeholder: "Select a state",
      allowClear: true
  });

// multi select placeholder
  $(".multi-select-placeholder").select2({
      placeholder: "Select a state"
  });

//default selection placeholder
  $(".default-placeholder").select2({
      placeholder: {
          id: '-1', // the value of the option
          text: 'Select an option'
        }
  });

// customizing how results are matched
  function matchCustom(params, data) {
      // If there are no search terms, return all of the data
      if ($.trim(params.term) === '') {
        return data;
      }
  
      // Do not display the item if there is no 'text' property
      if (typeof data.text === 'undefined') {
        return null;
      }
  
      // `params.term` should be the term that is used for searching
      // `data.text` is the text that is displayed for the data object
      if (data.text.indexOf(params.term) > -1) {
        var modifiedData = $.extend({}, data, true);
        modifiedData.text += ' (matched)';
  
        // You can return modified objects from here
        // This includes matching the `children` how you want in nested data sets
        return modifiedData;
      }
  
      // Return `null` if the term should not be displayed
      return null;
  }
  $(".customize-result").select2({
      matcher: matchCustom
  });

// matching grouped options

//minimum search term length
  $(".minimum-search-length").select2({
      minimumInputLength: 3 // only start searching when the user has input 3 or more characters
  });

//maximum search term length
  $(".maximum-search-length").select2({
      maximumInputLength: 20 // only allow terms up to 20 characters long
  });

// programmatically add new option
  var data = {
      id: 1,
      text: 'New Item'
  };
  var newOption = new Option(data.text, data.id, false, false);
  $(".add-new-options").append(newOption).trigger('change').select2();

// create if not exists

// Set the value, creating a new option if necessary
  if ($('.create-if-not-exists').find("option[value='" + data.id + "']").length) {
      $('.create-if-not-exists').val(data.id).trigger('change');
  } else { 
      // Create a DOM Option and pre-select by default
      var newOption = new Option(data.text, data.id, true, true);
      // Append it to the select
      $('.create-if-not-exists').append(newOption).trigger('change').select2();
  }

// using jquery selector

$('.jquery-selector').select2();
  $('.jquery-selector').on("change", function(){
      var selectData = $(this).find(':selected');
      var value = selectData.val();
      alert("you select " + value);
  });

// select2 rtl support
  $(".rtl-select2").select2({
      dir: "rtl"
  });

// destroy selector
  $(".destroy-selector").select2();

$("#destroy-selector-trigger").click(function(){
      $(".destroy-selector").select2("destroy");
  });

// opening options
  $(".opening-dropdown").select2();
  $("#dropdown-trigger-open").click(function(){
      $(".opening-dropdown").select2('open');
  });

// open or close dropdown
  $(".open-close-dropdown").select2();
  $("#opening-dropdown-trigger").click(function(){
      $(".open-close-dropdown").select2('open');
  });
  $("#closing-dropdown-trigger").click(function(){
      $(".open-close-dropdown").select2('close');
  });

// select2 methods
  var $singleUnbind = $(".single-event-unbind").select2();

$(".js-programmatic-set-val").on("click", function () {
      $singleUnbind.val("CA").trigger("change");
  });
  
  $(".js-programmatic-open").on("click", function () {
      $singleUnbind.select2("open");
  });
  
  $(".js-programmatic-close").on("click", function () {
      $singleUnbind.select2("close");
  });
  
  $(".js-programmatic-init").on("click", function () {
      $singleUnbind.select2({
          width: "400px"
      });
  });
  
  $(".js-programmatic-destroy").on("click", function () {
      $singleUnbind.select2("destroy");
  });

var $unbindMulti = $(".js-example-programmatic-multi").select2();
  $(".js-programmatic-multi-set-val").on("click", function () {
      $unbindMulti.val(["CA", "HA"]).trigger("change");
  });
  
  $(".js-programmatic-multi-clear").on("click", function () {
      $unbindMulti.val(null).trigger("change");
  });

})(jQuery);

Back