Select2多选组件限制显示选中项并展示剩余数量的实现问询

嘿，各位大佬，我现在在给Select2多选组件做自定义显示逻辑，需求是这样的：

• 当选中的项目数量≤5个时，直接显示所有选中项的文本
• 当选中数量超过5个时，只展示前5个选中项的文本，然后在单独的span里显示「剩余X个」的提示，以此控制选中项的显示长度

我已经写了一部分初始化Select2的代码，现在卡在templateSelection函数的逻辑上，不知道怎么修改它来实现上面的需求。下面是我目前的代码片段：

function initializeSelect2WithCheckbox(selector) {
    $(selector).select2({
        templateResult: formatSelectionWithCheckbox,
        templateSelection: function(item) {
            return $('<span>').text(item.text);
        },
        closeOnSelect: false,
        allowClear: true
    }).on('select2:select', function(e) {
        var selectedValue = e.params.data.id;

        if (selectedValue === 'all') {
            var allOptions = $(selector).find('option').not('[value="all"]');
            var selectAllChecked = $(e.target).find('option[value="all"]').prop('selected');

            allOptions.prop('selected', selectAllChecked);
            $(selector).trigger('change');
        }
        // 这里还有其他逻辑没写完...
    });
}

有没有大佬能指点一下，怎么修改templateSelection函数，或者有没有其他合适的方式来实现这个显示需求呀？多谢啦！

备注：内容来源于stack exchange，提问作者orp