Select2 中的标记分隔符

Question

提前致谢，有两件事：

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) 事件将不起作用。

Answer 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);
    }

Answer 2

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

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

Answer 3

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

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

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

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

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