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: []添加到select2 init参数中。

Answer 3

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

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

然后在javascript中

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

在标记中，您可以指定要将其显示为选择选项的任何值，并使用tokenSeperators在逗号或空格等上分隔文本。

注意：结果输入值将以逗号分隔。

Answer 4

出于某种原因唐纳德的解决方案对我不起作用（也许新版本的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 5

只需运行这个直接从options.tokenSeparators获取分隔符的jQuery，并自动应用于页面中的所有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');
});

将Select2输入转换为标记

5 个答案: