Select2: How to prevent tags sorting

Question

When user selects many items (tags), they are automatically sorted alphabetically. How to prevent automatic sort and keep user's order using Select2 4.0?

Update:

The mentioned "possible dublicate question" is for the older version of Select2 v3... I ask about version 4... It differs form older ones and mentioned answers dosn't solve the problem.

Crossfertilization

Answer 1

I've found a solution that works with Select2 v4. It changes the order of items - item selected by user are moved to the end.

$("select").select2();

$("select").on("select2:select", function (evt) {
  var element = evt.params.data.element;
  var $element = $(element);
  
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 500px;" multiple="multiple">
  <option>two</option>
  <option>four</option>
  <option>six</option>
</select>

Update

The solution was found here: github.com/select2/select2/issues/3106. Its author is kevin-brown.

Crossfertilization

You should credit where you found the solution: github.com/select2/select2/issues/3106 – Cawnpore

@Cawnpore Yes, you are right. I couldn't found where I had found the solution, but you've found it. – Crossfertilization

I'm not sure that's the original location, but it helps to credit the author and also follow up with them if there's a bug in the solution. As mentioned on GitHub this will reorder the options list, which may not be desired. There's a different workaround there that reorders the tags and preserves the options list order. – Cawnpore

No doubt, you are a life saver. In my case I just needed the first line of your code (var evt.params.data.element;) to send the selected value through ajax. This because (this.value) always brings the value of the very first element selected. :D ;) – Hardily

This changes the order of the dropdown when closeOnSelect is set to false – Joleenjolene

This is rearranging the dropdown list also.. I dont want the dropdown list to change. I want to remove the alphabetic order from the input box only. Is there a workaround for that ? – Danettedaney

Did anyone find a solution that doesn't also re-arrange the order of the dropdown list? – Gabie

I found a good solution for the dropdown sort problem: github.com/select2/select2/issues/… – Leer

This solution still reorders the selected options on page load – Reynoso

Answer 2

This has been discussed before for Select2 3.5.2, you can use select2('data') to get the order.

$("select").select2();

$('#sayResult').click(function () {
  // 'data' brings the unordered list, while val does not
  var data = $('select').select2('data');
  
  // Push each item into an array
  var finalResult = data.map(function () {
    return this.id;
  });

  // Display the result with a comma
  alert( finalResult.join(',') );
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select style="width: 500px;" multiple="multiple">
  <option>two</option>
  <option>four</option>
  <option>six</option>
</select>

<button id='sayResult'>Say Result</button>

Thalweg

That code is not working. It uses old version of Select2 v3.4.5 – Crossfertilization

This does not work in Select2 4.0.0 because data now returns the selected items in the order that they appear. – Efferent

Answer 3

This solution works best

HTML

<select style="width: 500px;" multiple="multiple">
    <option>two</option>
    <option>four</option>
    <option>six</option>
  </select>

JS

$(document).ready( function () {

    $("select").select2({
      tags: true
    });
    
    $("select").on("select2:select", function (evt) {
      var element = evt.params.data.element;
      var $element = $(element);
      
      $element.detach();
      $(this).append($element);
      $(this).trigger("change");
    });

} );

Beluga