CODEWITHSUNDEEP
jqueryjquery-select2
NJD
NJD

Reputation: 21

Select2 - Preselect Sortable

I would preselect items but in a specific order.

In this example, I preselected resources with ID 36, 17 and 42. I would therefore like they are displayed in the order 42 , 17 and 36 but select2 display me in alphabetical order .

Someone help me

var PRESELECTED_RESSOURCES = ['42', '36', '17'];

// Function search start one character
function matchStart(params, data) {
  params.term = params.term || '';
  if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
    return data;
  }
  return false;
}

// Function search start one character
(function($) {
  $.fn.extend({
    select2_sortable: function() {
      var select = $(this);
      $(select).select2({
        width: '100%',
        placeholder: 'Select ressources',
        matcher: function(params, data) {
          return matchStart(params, data);
        },
        createTag: function(params) {
          return undefined;
        },
        language: "fr"
      });
      var ul = $(select).next('.select2-container').first('ul.select2-selection__rendered');
      ul.sortable({
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true,
        items: 'li:not(.select2-search__field)',
        tolerance: 'pointer',
        stop: function() {
          $($(ul).find('.select2-selection__choice').get().reverse()).each(function() {
            var id = $(this).data('data').id;
            var option = select.find('option[value="' + id + '"]')[0];
            $(select).prepend(option);
          });
        }
      });
    }
  });
}(jQuery));
$('#essentiels').select2_sortable()
$("#essentiels").val(PRESELECTED_RESSOURCES).trigger("change");

//Function 
$("select").on("select2:select", function(evt) {
  var element = evt.params.data.element;
  var $element = $(element);

  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />

<select class="js-example-basic-multiple" name="essentiels[]" multiple="" id="essentiels" aria-hidden="true">
  <option value="17">A to Z BASE REVUES &amp; E-BOOKS</option>
  <option value="33">FREE LIBRARY</option>
  <option value="35">HAL - HYPER ARTICLE EN LIGNE</option>
  <option value="9">IEEE Xplore</option>
  <option value="36">IOP : INSTITUTE OF PHYSICS PUBLISHING - REVUES (Licence nationale)</option>
  <option value="40">JSTOR (Journals Storage)</option>
  <option value="10">KHEOX</option>
  <option value="11">Kompass</option>
  <option value="41">LINGUEE - TRADUCTEUR FRANCAIS/ANGLAIS</option>
  <option value="42">NATURE</option>
  <option value="46">OPEN GREY (anciennement OPEN SIGLE)</option>
  <option value="48">PERSEE</option>
</select>

Upvotes: 2

Views: 588

Answers (1)

Nagashree Hs
Nagashree Hs

Reputation: 853

I have tried the same code snippet and I have observed it does not display in alphabetical order. It displays according to the order of options, it does a lookup from first option and parses through all options. I just placed options as below and when I run the snippet it displays in this order 42 , 17 and 36

<option value="42">NATURE</option>
<option value="17">A to Z BASE REVUES &amp; E-BOOKS</option>
<option value="33">FREE LIBRARY</option>
<option value="35">HAL - HYPER ARTICLE EN LIGNE</option>
<option value="9">IEEE Xplore</option>
<option value="36">IOP : INSTITUTE OF PHYSICS PUBLISHING - REVUES(Licence nationale)</option>
<option value="40">JSTOR (Journals Storage)</option>
<option value="10">KHEOX</option>
<option value="11">Kompass</option>
<option value="41">LINGUEE - TRADUCTEUR FRANCAIS/ANGLAIS</option>
<option value="46">OPEN GREY (anciennement OPEN SIGLE)</option>
<option value="48">PERSEE</option>

Hope this helps.

Upvotes: 1

Related Questions