如何将 Select2 标签与换行符 tokenSeparator 一起使用？

Question

我正在创建一个 select2 输入，允许用户粘贴 csv 数据并将其转换为标签。我的问题是我希望能够使用垂直复制的数据创建标签，因为 select2 使用 <input type="text" /> 元素将换行符转换为 space 我不确定是否可行.我想为此继续使用 select2，但如果绝对没有办法，我愿意接受其他选择。

选择 2 定义：

$('#search_tags').select2({
    tags: [],
    tokenSeparators: [",", "\t", "\n"],
    dropdownCssClass: 'select2-hidden',
    placeholder: "Paste Here",
    formatNoMatches: function() {return '';}
});

HTML:

<input id="search_tags" type="hidden" style="width:100%;" tabindex="-1">

Answer 1

问题是，正如您所建议的，当 select2 代码开始形成标签时，粘贴的换行符已经被替换。这就是为什么自定义 tokenizer function 在这里也帮不了我们。

因此，诀窍是在粘贴过程中捕获换行符 并用其他分隔符之一替换它们。确保这是在您的 .select2(...) 代码之后执行的：

$('.select2-input').on('paste', function(e) {
    //get the raw pasted text
    var data = e.originalEvent.clipboardData.getData('Text');
    //replace newlines by tabs and add to conent
    $(this).val($(this).val() + '\t' + data.replace(/\n/g, '\t') + '\t');
    //prevent normal paste behaviour
    return false;
});

您可以在 this fiddle 中试用。

注意： 我不太确定现代浏览器对 e.originalEvent.clipboardData.getData('Text') 的普遍支持程度。我看到建议 IE9 需要 window.clipboardData.getData("Text")，因此您可能需要添加检查以查看浏览器支持哪些属性。

如何将 Select2 标签与换行符 tokenSeparator 一起使用？

How to use Select2 tags with newline character tokenSeparator?

html

jquery

jquery-select2