select2 ordered results

by Patrick Brockmann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css">
<select name="list" id="example1" style="width:500px;" multiple>
</select>

CSS

.select2-container .select2-selection--multiple {
  height: 200px;
}

JavaScript

var tags = [
  "United States",
  "Austria",
  "Alabama",
  "Jamaica",
  "Taiwan",
  "Canada",
  "Palau",
  "Wyoming"
];

tags.sort(function(a, b) {
  return a.toLowerCase().localeCompare(b.toLowerCase());
});

var options = [];
for (var i = 0; i < tags.length; i++) {
  options.push({
    id: tags[i],
    text: tags[i]
  });
}

$('#example1').select2({
  data: options,
  tags: true,
  multiple: true,
  allowClear: true,
  placeholder: 'select...',
});