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

Question

I use the Select2 plugin ( http://ivaynberg.imtqy.com/select2/ ), and, as you can see from the list of tags that I have in the screenshot, they are not listed in alphabetical order, and I would like to be able to do this.

EDIT: This is what I have now, but instead of asking, I want to sort the data (@appTags) using "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 are suspended in Debugger:

Here is an image of the @appTags object that I would like to sort by "text":

Answer 1

, JS. , , , .

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

Answer 2

2.0 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;
     });
};

select2 4.0 "" "customSorter"

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

Answer 3

Select2 API sortResults (sortResults)

, sortResults sortResults String.localeCompare() sortResults:

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" />

Hide result

Select2 API v4.0 (sorter)

sorter <select>:

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" />

Hide result