Select2 jQuery Plugin: Is there a way to sort a list of tags alphabetically?

Question

I'm using Select2 plugin (http://ivaynberg.github.io/select2/) and as you can see by the list of tags I have in the screenshot, they aren't listed alphabetically and I'd like to be able to do so.

EDIT: This is what I currently have, but instead of query, I want to sort the data (@appTags) via 'text', not 'id':

scope.find('input[name=noun]').select2({
  data: @appTags,
  sortResults: function(results, container, query) {
    if (query.term) {
      return results.sort();
    }
    return results;
  }
});

Screenshots of my Console paused in Debugger:

Here's an image of the @appTags object, of which I'd like to sort via 'text':

Answer 1

Here is a bit of code from the docs that is using the JS built in sort function. I modified it to sort alphabetically instead of by length as they did in the docs.

$('#e22').select2({
    sortResults: function(results, container, query) {
        if (query.term) {
            // use the built in javascript sort function
            return results.sort();
        }
        return results;
    }
});

Answer 2

For select2 plugin version 4.0

var customSorter = function(data) {
     return data.sort(function(a,b){
         a = a.text.toLowerCase();
         b = b.text.toLowerCase();
         if(a > b) {
             return 1;
         } else if (a < b) {
             return -1;
         }
         return 0;
     });
};

In select2 version 4.0, the sort param name is changed to "sorter" Now pass "customSorter" to the plugin

$("#genre").select2({ tags: true, sorter: customSorter});

Answer 3

Select2 API v3.x (sortResults)

You can sort elements using sortResults callback option with String.localeCompare() which uses case non sensitive comparison:

let tags = [ { id: 0, text: 'androidtag' }, { id: 1, text: 'origin' }, { id: 2, text: 'Hobby' }, { id: 3, text: 'is-awesome' }, { id: 4, text: 'age' }, { id: 5, text: 'TestingDateTag' }, { id: 6, text: 'name' }, { id: 7, text: 'surname' }, { id: 8, text: 'Birthday' } ];

$( 'input[name=noum]' ).select2({
  data: tags,
  tags: true,
  /* Sort tags using case non sensitive comparison */
  sortResults: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" integrity="sha256-ijlUKKj3hJCiiT2HWo1kqkI79NTEYpzOsw5Rs3k42dI=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js" integrity="sha256-7A2MDY2eGSSUvgfbuH1IdzYk8qkEd3uzwiXADqPDdtY=" crossorigin="anonymous"></script>

<input name="noum" style="width: 200px" />

Select2 API v4.0 (sorter)

You can sort elements using sorter callback option with an empty <select> tag:

let tags = [ { id: 0, text: 'androidtag' }, { id: 1, text: 'origin' }, { id: 2, text: 'Hobby' }, { id: 3, text: 'is-awesome' }, { id: 4, text: 'age' }, { id: 5, text: 'TestingDateTag' }, { id: 6, text: 'name' }, { id: 7, text: 'surname' }, { id: 8, text: 'Birthday' } ];

$( 'select[name=noum]' ).select2({
  data: tags,
  tags: true,
  /* Sort tags using case non sensitive comparison */
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" integrity="sha256-xqxV4FDj5tslOz6MV13pdnXgf63lJwViadn//ciKmIs=" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js" integrity="sha256-FA14tBI8v+/1BtcH9XtJpcNbComBEpdawUZA6BPXRVw=" crossorigin="anonymous"></script>

<select name="noum" style="width: 200px" multiple="multiple" />