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

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

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

很基本的东西。 当我在输入中键入一串文本，后跟逗号或空格时，前面的字符串被标记化，正如我所期望的那样。

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

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

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

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

我尝试在粘贴事件之后模拟逗号keypress事件。 （ .trigger({type: 'keypress', which: 188}) ）

我尝试通过拆分粘贴字符串为创建的数组中的每个项目更改input.select2-input的值。

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

Answer 1

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

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

我不确定我是否真的理解你的问题，但我已经制作了一个代码来将新输入与粘贴function分开，基本上它会覆盖默认的粘贴function来处理新的输入文本，这段代码会打破基于在’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 $("") .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