Question

我正在使用jQuery Select2创建一个允许自动标记化的输入。我用以下选项初始化了select2输入：

{
    tags: [''],
    tokenSeparators = [',', ' ']
}

非常基本的东西。当我在输入中键入一串文本，后跟一个逗号或空格时，前面的字符串被标记化，完全如我所料。

但是，我需要支持将文本粘贴到输入中。这就是事情崩溃的地方。

如果我将'1,2,3,4'粘贴到输入中，我会得到1,2和3的单独标记，但4不会被标记化。相反，它仍然是input.select2-input的值，当焦点改变时，值消失。

我尝试了许多不同的方法，但无济于事。

我试图拦截粘贴事件，使用e.originalEvent.clipboardData.getData('text/plain')获取粘贴的字符串值，取消事件，并在更改输入值并使用超时时间{{1}更改输入值之前在字符串末尾添加逗号}。

我尝试在粘贴事件后模拟逗号.select2('val', str)事件。（keypress）

我尝试为分割粘贴字符串而创建的数组中的每个项目更改.trigger({type: 'keypress', which: 188})的值。

似乎没什么用。有什么想法吗？

Answer 1

根据您发布的question，您可以使用以下代码来处理变体：

1 2 3 4

1,2,3,4

1,2 3,4

您可以查看jsfiddle。请注意：我发现版本3.5.0有第三个变体的错误，所以你应该使用最新的3.5.1。

$("#select2-input").select2({
    tags: [''],
    tokenizer: function(input, selection, callback) {
        if (input.indexOf(',') < 0 && input.indexOf(' ') < 0)
            return;

        var parts = input.split(/,| /);
        for (var i = 0; i < parts.length; i++) {
            var part = parts[i];
            part = part.trim();

            callback({id:part,text:part});
        }
    }
});

Answer 2

我不确定我是否真的理解你的问题，但是我已经制作了一个代码来将新输入与粘贴功能分开，基本上它会覆盖默认的粘贴功能来处理新的输入文本，这段代码会破坏输入基于选项'tokenSeparators'中指定的分隔符，然后将它们全部添加到分隔的列表中，您只需要在页面末尾运行此代码：

$(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');
    });

您可以在https://stackoverflow.com/a/37006931/2073339

查看原始答案

使用select2自动标记粘贴字符串中的最后一项

2 个答案: