在Select2中按名称排序

Sort by name in Select2

本文关键字：排序 Select2      更新时间：2023-09-26

有没有办法按名称对select2生成的列表进行排序？我有一些代码：

var dataUser = [{
    "id": "5",
    "text": "BTest"
}, {
    "id": "2",
    "text": "ATest"
}, {
    "id": "8",
    "text": "CTest"
}, {
    "id": "13",
    "text": "DTest"
}];

$("#mylist").select2({
    data: dataUser,
    templateResult: function(data) {
        return data.text;
    },
    sorter: function(data) {    
        return data.sort();
    }
});

http://jsfiddle.net/oe9retsL/4/

这个列表按id排序，但我要按文本排序。

您需要向sort()提供一个函数，该函数包含比较数组中每个对象的text属性的逻辑。试试这个：

sorter: data => data.sort((a, b) => a.text < b.text ? -1 : a.text > b.text ? 1 : 0);
// legacy version, for IE support:
sorter: function(data) {
    return data.sort(function(a, b) {
        return a.text < b.text ? -1 : a.text > b.text ? 1 : 0;
    });
}

要对所选选项进行排序，当选择一个选项时，您需要在标签上实现类似的逻辑，如下所示：

const dataUser = [{ "id": "5", "text": "BTest" }, { "id": "2", "text": "ATest" }, { "id": "8", "text": "CTest" }, { "id": "13", "text": "DTest" }];
const sortHandler = (a, b) => $(a).text() < $(b).text() ? -1 : $(a).text() > $(b).text() ? 1 : 0;
$("#mylist").select2({
  data: dataUser,
  templateResult: data => data.text,
  sorter: data => data.sort(sortHandler)
}).on("select2:select", () => {
  $('.select2-selection__rendered li.select2-selection__choice').sort(sortHandler).prependTo('.select2-selection__rendered');
});
select {
  width: 140px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<select name="list" id="mylist" multiple></select>

相关文章：