Sort by name in Select2

Question

Is there any way to sort my list generated by select2 by name? I have some code :

var dataUser = [{
    "id": "5",
    "text": "BTest"
}, {
    "id": "2",
    "text": "ATest"
}, {
    "id": "8",
    "text": "CTest"
}, {
    "id": "13",
    "text": "DTest"
}];


$("#mylist").select2({
    data: dataUser,
    templateResult: function(data) {
        return data.text;
    },
    sorter: function(data) {    
        return data.sort();
    }
});

http://jsfiddle.net/oe9retsL/4/

This list sorts by id, but I want sort by text.

Dodson

Answer 1

You need to provide a function to sort() which contains the logic to compare the text property of each object in the array. Try this:

sorter: data => data.sort((a, b) => a.text < b.text ? -1 : a.text > b.text ? 1 : 0);

// legacy version, for IE support:
sorter: function(data) {
    return data.sort(function(a, b) {
        return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
    });
}

To sort the selected options you need to implement similar logic on the tag well when an option is selected, like this:

const dataUser = [{ "id": "5", "text": "BTest" }, { "id": "2", "text": "ATest" }, { "id": "8", "text": "CTest" }, { "id": "13", "text": "DTest" }];
const sortHandler = (a, b) => $(a).text() < $(b).text() ? -1 : $(a).text() > $(b).text() ? 1 : 0;

$("#mylist").select2({
  data: dataUser,
  templateResult: data => data.text,
  sorter: data => data.sort(sortHandler)
}).on("select2:select", () => {
  $('.select2-selection__rendered li.select2-selection__choice').sort(sortHandler).prependTo('.select2-selection__rendered');
});

select {
  width: 140px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<select name="list" id="mylist" multiple></select>

Socage

Yeah, works perfect, but is there any way to sort already selected options? – Dodson

Wow, great and fast solution! :) Thank You @Rory McCrossan ! – Dodson

No problem, glad to help. – Socage

Ok @Rory McCrossan I have one mistake. When I add the second field select2 that such miracles happen: jsfiddle.net/oe9retsL/7 – Dodson

Here you go: jsfiddle.net/RoryMcCrossan/oe9retsL/8. You need to use the this reference in the handler to find the tag well related to the select. – Socage

I'm immensely grateful to You! – Dodson

I found one error in this sort @Rory McCrossan. You can remove sensitive detection? See what happens when I add a lowercase 'a'. jsfiddle.net/oe9retsL/10 This value is given at the end of the list – Dodson

You need to convert both values to the same case to remove the case-sensitivity: jsfiddle.net/oe9retsL/11 – Socage

Very fast! :) And what if when We have such a space before signs. It is possible to handle this? – Dodson

I'm not sure what you mean by 'space before signs'. If you have issues with the code it's probably best to open a new question. – Socage