Select2 TokenSeparators 不适用于 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 作为 | 传递时字符，当我 get/output 选择 2 值时，它仍将值输出为逗号分隔列表，而不是管道。

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

知道为什么这不起作用或需要做什么才能将 tokenSeparator 更改为管道字符吗？

谢谢。

Answer 1

阅读后 the select2 documentation, tokenSeparators 不是关于输出而是 splitting/tokenising 自由文本输入。

会不会是您的库 returns/outputs 一个您用作字符串的字符串数组？将字符串数组转换为字符串会在每个字符串之间放置逗号。如果是这样，您可以执行类似 data.join('|').

的操作

Answer 2

来自文档：

tagging

In addition to a prepopulated menu of options, Select2 can dynamically create new options from text input by the user in the search box. This feature is called "tagging". To enable tagging, set the tags option to true

templateSelection

The appearance of selected results can be customized by using the templateSelection configuration option. This takes a callback that transforms the selection data object into a string representation or jQuery object

templateResult

By default, Select2 will display the text property of each data object within the list of results. The appearance of search results in the dropdown can be customized by using the templateResult option

tokenSeparators 选项与 tagging 模式一起使用以获取输入。

select2-multi-checkboxes 库使用 templateResult 和 selection 结果自定义 select 选项使用 templateSelection.

在输入中显示

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

Select2 TokenSeparators 不适用于 S2MultiCheckboxes 扩展

Select2 TokenSeparators not working for S2MultiCheckboxes Extension

javascript

jquery-select2