Select2 jQuery插件：有没有办法按字母顺序对标签列表进行排序？

Question

我正在使用Select2插件（http://ivaynberg.github.io/select2/），正如您在屏幕截图中的标签列表中所看到的，它们不是按字母顺序列出的，我想要能够这样做。

编辑：这就是我目前所拥有的，但我不是通过查询来代替查询，而是通过＆＃39;文字＆＃39;而不是＆＃39; id＆＃39;：

scope.find('input[name=noun]').select2({
  data: @appTags,
  sortResults: function(results, container, query) {
    if (query.term) {
      return results.sort();
    }
    return results;
  }
});

我的控制台在调试器中暂停的屏幕截图：

这是@appTags对象的图片，我想通过＆text;＆＃39;

对其进行排序。

Answer 1

以下是使用JS内置排序函数的文档中的一些代码。我将其修改为按字母顺序排序，而不是像在文档中那样按长度排序。

$('#e22').select2({
    sortResults: function(results, container, query) {
        if (query.term) {
            // use the built in javascript sort function
            return results.sort();
        }
        return results;
    }
});

Answer 2

对于select2插件版本4.0

var customSorter = function(data) {
     return data.sort(function(a,b){
         a = a.text.toLowerCase();
         b = b.text.toLowerCase();
         if(a > b) {
             return 1;
         } else if (a < b) {
             return -1;
         }
         return 0;
     });
};

在select2版本4.0中，排序参数名称更改为＆＃34; sorter＆＃34; 现在通过＆＃34; customSorter＆＃34;到插件

  

$（＆＃34;＃genre＆＃34;）。select2（{tags：true，sorter：customSorter}）;

Answer 3

Select2 API v3.x（sortResults）

您可以使用String.localeCompare()的sortResults回调选项和不区分大小写的比较来对元素进行排序：

let tags = [ { id: 0, text: 'androidtag' }, { id: 1, text: 'origin' }, { id: 2, text: 'Hobby' }, { id: 3, text: 'is-awesome' }, { id: 4, text: 'age' }, { id: 5, text: 'TestingDateTag' }, { id: 6, text: 'name' }, { id: 7, text: 'surname' }, { id: 8, text: 'Birthday' } ];

$( 'input[name=noum]' ).select2({
  data: tags,
  tags: true,
  /* Sort tags using case non sensitive comparison */
  sortResults: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});

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

<input name="noum" style="width: 200px" />

Select2 API v4.0 (sorter)

您可以使用sorter回调选项带空的<select>标签来对元素进行排序：

let tags = [ { id: 0, text: 'androidtag' }, { id: 1, text: 'origin' }, { id: 2, text: 'Hobby' }, { id: 3, text: 'is-awesome' }, { id: 4, text: 'age' }, { id: 5, text: 'TestingDateTag' }, { id: 6, text: 'name' }, { id: 7, text: 'surname' }, { id: 8, text: 'Birthday' } ];

$( 'select[name=noum]' ).select2({
  data: tags,
  tags: true,
  /* Sort tags using case non sensitive comparison */
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});

<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 name="noum" style="width: 200px" multiple="multiple" />