How can i sort select2 results by specific character?

Question

I want to sort below Options by First Character. e.g. if i search 'banana' then all 4 options will search with select2 but i want 'Sbanana1' first.

So is there any option that I sort select2 results by "S"(specific) Character, so starting from 's' option will display first.

<button type=button>Sort Options</button>
<select class='whatever'>
<option value='Banana'>Banana1</option>
    <option value='Hello'>Banana2</option>        
    <option value='Sugar Cane'>SBanana1</option>
    <option value='Palm Oil'>SBanana2</option>
</select>

Answer 1

Using Select2 options API v4.0 - sort

$('.whatever').select2({
  sorter: function(data) {
    /* Sort data using lowercase comparison */

    return data.sort(function(a, b) {
      a = a.text.toLowerCase();
      b = b.text.toLowerCase();
      
      if (a[0] == 's' && b[0] == 's') {
        return compare(a, b)
      } else if (a[0] == 's') {
        return -1;
      } else if (b[0] == 's') {
        return 1;
      } else {
        return compare(a, b)
      }
    });
  }
});

function compare(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  }
  return 0;
}

<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 class="whatever">
    <option value="Banana">Banana1</option>
    <option value="Hello">Banana2</option>
    <option value="Sugar Cane">SBanana1</option>
    <option value="Palm Oil">SBanana2</option>
</select>

Using Select2 options API v3.x - sortResults

$('.whatever').select2({
  sortResults: function(data) {
    /* Sort data using lowercase comparison */

    return data.sort(function(a, b) {
      a = a.text.toLowerCase();
      b = b.text.toLowerCase();
      
      if (a[0] == 's' && b[0] == 's') {
        return compare(a, b)
      } else if (a[0] == 's') {
        return -1;
      } else if (b[0] == 's') {
        return 1;
      } else {
        return compare(a, b)
      }
    });
  }
});

function compare(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  }
  return 0;
}

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

<select class="whatever">
      <option value="Banana">Banana1</option>
      <option value="Hello">Banana2</option>
      <option value="Sugar Cane">SBanana1</option>
      <option value="Palm Oil">SBanana2</option>
</select>