Javascript - How to sort results select2 tags alphabetically?

PBrockmann
September 19, 2023
118 views
0 votes
2 Answers

I would like to sort alphabetically (case insensitive), the tags choosen from a select2.
I have used the sorter function to sort the tags to be selected but once selected they are not displayed alphabetically.

How to do this ? (I work with last 4.0.13 select2 release).

$('#example1').select2({
        tags: true,
        multiple: true,
        allowClear: true,
        sorter: function(data) {
                return data.sort(function (a, b) {
                        var a1 = a.text.toLowerCase();
                        var b1 = b.text.toLowerCase();
                        if (a1 > b1) {
                            return 1;
                        }
                        if (a1 < b1) {
                            return -1;
                        }
                        return 0;
                });
        }
});

<select name="list" id="example1" style="width:500px;">
   <option>United States</option>
   <option>Austria</option>
   <option>Alabama</option>
   <option>Jamaica</option>
   <option>Taiwan</option>
   <option>canada</option>
   <option>palau</option>
   <option>Wyoming</option>
</select>

Should be Alabama, Austria, Jamaica, United States.

Tags: javascript jquery-select2

Answers

Here’s some working code of what I think you’re looking for,

HTML

<select name="list" id="example1" style="width:500px;">
   <option value="United States">United States</option>
   <option value="Austria">Austria</option>
   <option value="Alabama">Alabama</option>
   <option value="Jamaica">Jamaica</option>
   <option value="Taiwan">Taiwan</option>
   <option value="canada">canada</option>
   <option value="palau">palau</option>
   <option value="Wyoming">Wyoming</option>
</select>

JS from, Sorting options elements alphabetically using jQuery

   var options = $("#example1 option"); // Collect options         
    options.detach().sort(function(a, b) { // Detach from select, then Sort
      var at = $(a).text().toLowerCase();
      var bt = $(b).text().toLowerCase();
      return (at > bt) ? 1 : ((at < bt) ? -1 : 0); // Tell the sort function how to order
    });
    options.appendTo("#example1");

You can use localeCompare function for comparing the strings. Here is the modified code:

$('#example1').select2({
        tags: true,
        multiple: true,
        allowClear: true,
        sorter: function(data) {
                return data.sort(function (a, b) {
                        var a1 = a.text.toLowerCase();
                        var b1 = b.text.toLowerCase();
                        return b1.localeCompare(a1);
                });
        }
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select name="list" id="example1" style="width:500px;">
   <option>United States</option>
   <option>Austria</option>
   <option>Alabama</option>
   <option>Jamaica</option>
   <option>Taiwan</option>
   <option>canada</option>
   <option>palau</option>
   <option>Wyoming</option>
</select>

It will sort them alphabetically.

Note that: The United States word has space in between, so before comparing you have to remove the space between words. You can use replace() function for this. Hope it will be helpful.

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to sort results select2 tags alphabetically?

Answers