如何按特定字符对select2结果进行排序?

问题描述 投票:2回答:1

我想按First Character排序选项。例如如果我搜索'banana',则所有4个选项将使用select2进行搜索,但我首先需要'Sbanana1'。

那么是否有任何选项我按“S”(特定)字符对select2结果进行排序,因此从's'选项开始将首先显示。

<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>
javascript jquery jquery-select2 jquery-select2-4
1个回答
4
投票

使用Select2选项API v4.0 - 排序

$('.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>

使用Select2选项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>
© www.soinside.com 2019 - 2024. All rights reserved.