javascript Select2 jQuery Plugin：有没有办法按字母顺序对标签列表进行排序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24520524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 jQuery Plugin: Is there a way to sort a list of tags alphabetically?
提问by iamryandrake
I'm using Select2 plugin (http://ivaynberg.github.io/select2/) and as you can see by the list of tags I have in the screenshot, they aren't listed alphabetically and I'd like to be able to do so.
我正在使用 Select2 插件（http://ivaynberg.github.io/select2/），正如您在屏幕截图中的标签列表中看到的那样，它们没有按字母顺序列出，我希望能够这样做。
EDIT: This is what I currently have, but instead of query, I want to sort the data (@appTags) via 'text', not 'id':
编辑：这是我目前拥有的，但不是查询，我想通过“文本”而不是“id”对数据（@appTags）进行排序：
scope.find('input[name=noun]').select2({
data: @appTags,
sortResults: function(results, container, query) {
if (query.term) {
return results.sort();
}
return results;
}
});
Screenshots of my Console paused in Debugger:
我的控制台在调试器中暂停的屏幕截图：
Here's an image of the @appTags object, of which I'd like to sort via 'text':
这是@appTags 对象的图像，我想通过“文本”对其进行排序：
回答by jontewks
Here is a bit of code from the docs that is using the JS built in sort function. I modified it to sort alphabetically instead of by length as they did in the docs.
这是使用 JS 内置排序函数的文档中的一些代码。我将其修改为按字母顺序排序，而不是像文档中那样按长度排序。
$('#e22').select2({
sortResults: function(results, container, query) {
if (query.term) {
// use the built in javascript sort function
return results.sort();
}
return results;
}
});
回答by Ima
For select2 plugin version 4.0
对于 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;
});
};
In select2 version 4.0, the sort param name is changed to "sorter" Now pass "customSorter" to the plugin
在 select2 4.0 版中，排序参数名称更改为“sorter” 现在将“customSorter”传递给插件
$("#genre").select2({ tags: true, sorter: customSorter});
$("#genre").select2({ tags: true, sorter: customSorter});
回答by OscarGarcia
Select2 API v3.x (sortResults)
Select2 API v3.x ( sortResults)
You can sort elements using sortResultscallback option with String.localeCompare()which uses case non sensitive comparison:
您可以使用sortResults回调选项对元素进行排序，String.localeCompare()该选项使用不区分大小写的比较：
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)
Select2 API v4.0 ( sorter)
You can sort elements using sortercallback option with an empty <select>tag:
您可以使用带有空标签的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" />