jquery-select2 - 将 Select2 输入转换为标记

Question

Select2 jQuery 插件是否有内置的将字符串转换为标记的功能？

当用户将字符串粘贴到 Select2 字段中时，我希望能够调用此标记化函数，以便粘贴的输入成为标记。

Answer 1

我想我已经用以下代码自己解决了这个问题：

// force tokenizing of Select2 auto-complete fields after pasting
$('body').on('paste', '.select2-input', function() {
  // append a delimiter and trigger an update
  $(this).val(this.value + ',').trigger('input');
});

这假定逗号在插件的“tokenSeparators”初始化设置中设置为分隔符。

Answer 2

对于 4.0.1 版本：

$('#my-select').data('select2').dataAdapter.$search.val("tag1,tag2,").trigger("input");

这将添加两个标签：tag1和tag2（注意尾随,）。

重要提示：您应该添加data: []到select2init 参数中。

Answer 3

出于某种原因，唐纳德的解决方案对我不起作用（也许新版本的 select2 行为不同）。这对我有用：

$('body').on('paste', '.select2-input', function (e) {
    var pasteData = (e.originalEvent || e).clipboardData.getData('text/plain') || '';
    $(this).val(pasteData + ',');
    e.preventDefault();
});

由于在触发事件时 的值为.select2-input空字符串，因此我从事件对象中提取了粘贴的字符串。显然，用于复制操作的默认 select2 在此之后仍然触发，所以我必须添加e.preventDefault();以阻止它运行并弄乱输入。

Answer 4

使用输入类型文本，并将 select2 分配给它。喜欢

<input type="text" id="makeTokens" />

然后在javascript中

$("#makeTokens").select2({
  placeholder: "Paste data",
  tags: ["red", "green", "blue"],
  tokenSeparators: [",", " "]
});

在标签中，您可以分配您希望它显示为选择选项的任何值，并使用 tokenSeperators 以逗号或空格等分隔文本。

注意：生成的输入值将是逗号分隔的标记。

Answer 5

只需运行这个 jQuery，它直接从中获取分隔符options.tokenSeparators，并自动应用于页面中的所有 select2 实例：

$(document).on('paste', 'span.select2', function (e) {
    e.preventDefault();
    var select = $(e.target).closest('.select2').prev();
    var clipboard = (e.originalEvent || e).clipboardData.getData('text/plain');
    var createOption = function (value, selected) {
        selected = typeof selected !== 'undefined' ? selected : true;
        return $("<option></option>")
            .attr("value", value)
            .attr("selected", selected)
            .text(value)[0]
    };
    $.each(
        clipboard.split(new RegExp(select.data('select2').options.options.tokenSeparators.map(function (a) {
            return (a).replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
        }).join('|'))),
        function (key, value) {
            if (value && (!select.val() || (select.val() && select.val().indexOf('' + value) == -1))) {
                select.append(createOption(value));
            }
        });
    select.trigger('change');
});