Select2 token分隔符不适用于S2MultiCheckboxes扩展

Question

我使用S2MultiCheckboxes与Select2 4.0.3，从这里采取:https://github.com/wasikuss/select2-multi-checkboxes

插件工作得很好。但是，当添加"tokenSeparator"选项，则在Select2中未实现。

下面是扩展Select2插件的S2MultiCheckboxes代码:

<script>
(function($) {
var S2MultiCheckboxes = function(options, element) {
var self = this;
self.options = options;
self.$element = $(element);
var values = self.$element.val();
self.$element.removeAttr('multiple');
self.select2 = self.$element.select2({
allowClear: true,
minimumResultsForSearch: options.minimumResultsForSearch,
placeholder: options.placeholder,
tokenSeparators: options.tokenSeparators,
closeOnSelect: false,
templateSelection: function() {
return self.options.templateSelection(self.$element.val() || [], $('option', self.$element).length); 
},
templateResult: function(result) {
if (result.loading !== undefined)
return result.text;
return $('<div>').text(result.text).addClass(self.options.wrapClass);
},
matcher: function(params, data) {
var original_matcher = $.fn.select2.defaults.defaults.matcher;
var result = original_matcher(params, data);
if (result && self.options.searchMatchOptGroups && data.children && result.children && data.children.length != result.children.length) {
result.children = data.children;
}
return result;
}
}).data('select2');
self.select2.$results.off("mouseup").on("mouseup", ".select2-results__option[aria-selected]", (function(self) {
return function(evt) {

var $this = $(this);
var data = $this.data('data');

if ($this.attr('aria-selected') === 'true') {
self.trigger('unselect', {
originalEvent: evt,
data: data
});
return;
}

self.trigger('select', {
originalEvent: evt,
data: data
});
}
})(self.select2));
self.$element.attr('multiple', 'multiple').val(values).trigger('change.select2');
}

$.fn.extend({
select2MultiCheckboxes: function() {
var options = $.extend({
placeholder: 'Choose elements',
templateSelection: function(selected, total) {
return selected.length + ' of ' + total + ' selected';
},
wrapClass: 'wrap',
minimumResultsForSearch: -1,
searchMatchOptGroups: true
}, arguments[0]);

this.each(function() {
new S2MultiCheckboxes(options, this);
});
}
});
})(jQuery);
</script>

我在第13行添加了一行:tokenSeparators: options.tokenSeparators,。当我将tokenSeparator作为一个|字符传入时，它仍然以逗号分隔的列表输出值，而不是当我获取/输出select2值时的管道。

我也试过:tokenSeparators: '|'和tokenSeparators: ['|']我还尝试添加不工作的tags:true选项。我也试过使用separator: '|'，但没有工作。

任何想法为什么这是不工作或需要做什么来获得tokenSeparator更改为管道字符?

谢谢。

Answer 1

在阅读select2文档后，tokenSeparators不是关于输出的，而是关于分割/标记自由文本输入的。

可能是你的库返回/输出一个字符串数组，你使用它作为字符串吗?将字符串数组转换为字符串将在每个字符串之间放置逗号。如果是这样，您可以执行data.join('|')。

Answer 2

From doc:

tagging

除了预先填充的选项菜单外，Select2还可以根据用户在搜索框中输入的文本动态创建新选项。这个特性被称为"标记"。要启用标记，请将tags选项设置为true

templateSelection

所选结果的外观可以通过使用templateSelection配置选项来定制。它接受一个回调，将选择数据对象转换为字符串表示或jQuery对象

templateResult

默认情况下，Select2将显示结果列表中每个数据对象的text属性。可以使用templateResult选项

自定义下拉菜单中搜索结果的外观

tokenSeparators选项用于tagging模式的输入。

select2-multi-checkboxes库使用templateResult自定义选择选项，使用templateSelection在输入中显示选择结果。

如果你想使用tokenSeparators，那么你可能需要直接使用select2库，或者如果你仍然想使用select2-multi-checkboxes库，然后从库中删除选项和代码，这可能是你不能使用tokenSeparators选项的原因。