Select2 中的标记分隔符

Posted 2023-05-07

【中文标题】Select2 中的标记分隔符

【英文标题】：tokenSeparators in Select2

【发布时间】：2015-08-12 15:48:34

【问题描述】：

提前致谢，有两件事：

1- 如何在 Select2 中将“Enter”和“Tab”键作为标记？

这是我的一些代码。

            $("#ListaValores").val($("#ListaValores").val().replace(/\;/g,','))
        $("#ListaValores").select2(
            tags: true,
            tokenSeparators: [';'],
            maximumResultsForSearch: -1,
            dropdownCss: display:'none',
        );

第一行只是转换输入，以便 Select2 可以使用数据。

原始输入可以是这样的：

$("#ListaValores").val("value1;value2;value3")

这些值存储在 db 中并加载到文本框，然后转换为 select2。

一切都按预期工作，但我想改造这部分：

tokenSeparators: [';']

所以它也接受“Enter”和“Tab”键作为令牌。

有人可以帮忙吗？我尝试了 ASCII 码，但没有成功。

2- 另外，是否有任何标签可以禁用微调器图像？ （由于没有加载数据，我真的不需要出现加载图像）

更新 2：

我在这方面取得了一些成功：

$("#s2id_ListaValores").on('keyup', function(e) 
            if(e.keyCode === 13)
                $("#ListaValores").val($("#ListaValores").val() + ';' + $("#s2id_autogen1").val())
            
        );

但是 $("#s2id_autogen1").val() 不是静态的并且总是在变化，所以这种工作一次......另外，我仍然需要更新显示的结果。我可以在 select2 div 上使用“刷新”来做到这一点，但随后 div 会更改它的 id，并且 $("#s2id_ListaValores").on('keyup', function(e) 事件将不起作用。

【问题讨论】：

如果您设置多个和标签以允许使用某些值，则 Enter 会自动用作标记分隔符：.

在 github 的 select2 repo 上有一个 open issue 来添加这个功能：现在，你不能。

正如我之前所说，我设法解决了这个问题。在我留下的代码中，您只需要包含一个正则表达式即可自动处理 id 更改。

【参考方案1】：

我通过递归函数解决了这个问题：

//init select2 field:
initMultiSelect(tSel);

function initMultiSelect(tSel) 
        tSel.select2('destroy');
        tSel.select2(
            tags: true,
            tokenSeparators: [',', ' ', ';'],
            dropdownCss: display:'none'
        );

        //manual add new values by Enter
        (function (t) 
            $('#s2id_' + t.attr('id')).on('keyup', function(e) 
                if(e.keyCode === 13)
                    //add new value
                    t.val(t.val() + ',' + $('#s2id_' + t.attr('id') + ' input ').val());

                    //refresh select2
                    initMultiSelect(t);

                    //get focus to select2 last position
                    t.select2("close");
                    t.select2("open");
                
            );
        )(tSel);
    

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码 sn-p 可以解决问题，包括说明 如何 和 为什么 这解决了问题would really help 以提高您的帖子质量。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人！请edit您的答案添加解释，并说明适用的限制和假设。

这个答案与我在原始帖子中的更新使用了相同的想法。只是使用正则表达式的替代方法。

【参考方案2】：

目前，在粘贴时，这在当前版本的 select2 中是不可能的，因为它使用 input type="text" 作为输入字段，并且在粘贴时浏览器会去除换行符。

为了完成这项工作，需要对 select2 进行修补以改用 textarea。我打开了一个拉取请求来完成此操作，您可以在此处查看：https://github.com/select2/select2/pull/4795 如果/当我的拉取请求被合并时，您应该能够使用指定的字符作为令牌分隔符，但在此之前，您可以下载我的如果您愿意，可以使用 fork 来解决您的问题。

【参考方案3】：

尝试使用以下作为“enter”和“tab”键的标记分隔符。

tokenSeparators: [';', '\n', '\t']

“enter”键通常会触发 Select2 的选择，但换行符（不同程序中的“enter”键）不会。您可以使用 \n 向 Select2 指示这些也应被视为分隔符。

相同的选项出现在 tab 键上，它通常应该选择当前突出显示的值，并在从另一个源加载时使用 \t 作为分隔符。

请记住，这种差异仅在您粘贴需要标记化的数据时才真正重要，因为 Select2 具有这两个键的绑定，它们已经自动标记化它们。您可能需要启用 tags 才能做到这一点。

【讨论】：

\n - 工作，但我在 Ubuntu 上测试，Windows 呢？