是否可以将列表粘贴到select2字段并匹配列表中的每个项目？

我使用Select2来管理大型数据列表。 用户表示希望能够将列表粘贴到Select2字段以便一次选择各种项目，而不是手动输入和匹配列表中的每个项目。

我试图使用tokenSeparators来分隔列表中的项目。 这个和文档中的令牌演示让我相信我希望做的事情是可能的，但到目前为止，我没有任何快乐。

我用来实例化Select2的代码是：

 $('input').select2({ width: 'element', matcher: function (term, text) { return text.toUpperCase().indexOf(term.toUpperCase()) === 0; }, minimumInputLength: 3, multiple: true, data: tagList, // tagList is an array of objects with id & text parameters placeholder: 'Manage List', initSelection: function (element, callback) { var data = []; $.each(function () { data.push({id: this, text: this}); }); callback(data); }, tokenSeparators: [',', ', ', ' '] }); 

只是为了澄清，在所有其他方面，select2字段工作。 当列表粘贴到字段中时，没有任何匹配。 我想测试粘贴列表中的所有项目。 这是可能的，如果是的话，怎么样？

编辑：我已经尝试了以下代码，但它似乎不起作用：

 $('body').on('paste', '#s2id_list-unitids .select2-input', function () { var that = this; setTimeout(function () { var tokens = that.value.split(/[\,\s]+/); $('#list-unitids').val(tokens, true);console.log($('#list-unitids').select2('val')); }, 1); }); 

这是我创造的小提琴： http ： //jsfiddle.net/KCZDu/ 。

Answer 1

select2提供了一个tokenizer选项，允许您预处理输入。 这是您的特定用例的可能实现：

 tokenizer: function(input, selection, callback) { // no comma no need to tokenize if (input.indexOf(',')<0) return; var parts=input.split(","); for (var i=0;i 

这是一个工作小提琴： http ： //jsfiddle.net/XcCqg/38/

还要注意你的原始小提琴使用select2 3.2，这是非常过时的，可能不支持标记器。

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