Select2 - Sortelectableをあらかじめ選択してください

Question

私は特定の順序で項目を事前に選択します。

この例では、ID 36,17、および42のリソースを事前に選択しました。したがって、それらは42,17、および36の順番で表示されますが、select2はアルファベット順に表示されます。

誰かが、私は同じコードスニペットを試してみましたが、私はそれがアルファベット順に表示されません観察している

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>

Answer 1

私を助けて。オプションの順番に従って表示し、最初のオプションからルックアップを行い、すべてのオプションを解析します。私は以下のようにオプションを配置し、私はそれがこの順42に表示されるスニペットを実行すると、17および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> 

・ホープ、このことができます。