如何使用select2 v4.0禁用创建新标签？

Question

我一直在尝试使用新的Select2 v4.0，它有许多改进。我主要对tags功能感兴趣。我希望能够通过ajax搜索标记，并仅仅能够从显示的结果中选择标记，而不能创建新的标记。这个功能类似于StackOverflow - 如果你没有必要的声望，你就不能创建新的标记，但你仍然可以给问题贴上现有的标记。

这里有一个jsfiddle，其中包含我的代码，这些代码取自示例。在这个例子中，你可以创建新的标记，这是我想限制的。用户应该只能从通过ajax从GitHub检索到的列表中选择标记。

有人知道如何禁用这个功能吗？

- tftd

Answer 1

这应该会起作用 - 在select2的初始化中，尝试从createTag函数中返回undefined，就像这样:

createTag: function(params) {
                return undefined;
           }

- SnowJon

---

抱歉回复晚了。这对我来说似乎很好用。谢谢你的分享！ :) - tftd

@tftd，你能否使用这个解决方案更新代码片段？因为我尝试更新你发送的代码片段，但它无法正常工作。 - Neha Choudhary

显然，在4.0之前（3.5.3）的Select2中，这个被称为createSearchChoice()。当他们升级到4.0版本时，他们更改了许多函数名称。 - David R Tribble

我想知道...为什么他们自己的文档指向 tags: false，却要这样做呢？https://select2.org/tagging - Rafael

Answer 2

我也曾经遇到这个问题，但是花了几个小时后终于解决了。

我指定了几个令牌分隔符（因为我的访问者可以在网站的不同位置创建标签）。结果发现即使将 tags 配置设置为 false，分隔符仍然会被应用。

解决方法：将 tags: false，并且不要为 tokenSeperators 添加值。保留 multiple: true。

- Rob

Answer 3

当初始化Select2时，您可以通过删除tags：true或在初始化Select2时设置tags：false来禁用标签。只有在传入true时，选项tags为真值时才启用标签，详情请参见此处。请注意保留HTML标记。

- Kevin Brown-Silva

---

我正在寻找以下视觉效果。如果我设置tags: false(或者只是省略它)，它将回到一个选择框。在我的情况下，我需要它更像tag-it而不是一个选择框。 - tftd

我不太确定你的意思，而且很遗憾，如果没有一个jsfiddle/jsbin来查看（你现在拥有的与你想要的），那么除了回答你标题中的问题之外，很难回答其他任何问题。我不确定你所说的“返回到选择框”是什么意思。你是在寻找“multiple”选项吗？ - Kevin Brown-Silva

我可能没有解释清楚 - 对此感到抱歉。我的意思是，如果我删除 tags: false，它将变成一个类似于加载远程数据示例的选择框。我已经更新了我的问题。希望这样更清楚明白？ - tftd

我认为他的意思是希望用户必须选择现有的标签值，而不能输入自己的自定义新标签值。我也想要同样的功能。例如，Stackoverflow不允许低分用户创建新标签。 - JasonDavis

Answer 4

我不确定是否应该在这里添加以下内容，但当我搜索同样的问题时，谷歌将我指向了这个问题。然而，我使用的是旧版本3.x，以下是如何实现3.x版本相同场景的方法。

已在版本3.5上测试

createSearchChoice: function(params) {
    return undefined;
}

- Mostafa Hussein

Answer 5

标签:false,

$("#DropDownId").select2({
       minimumInputLength: 3,
       maximumSelectionLength: 10,
       tags: [],
       **tags:false,**
    ajax: {
        url: "@Url.Action("ActionName", "ControllerName")",
        type: "get",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                Title: params.term // search term
            };
        },
        processResults: function (response) {
            return {
                results: $.map(response, function (item) {
                    return {
                        text: item.Title,
                        id: item.NibafInstituteId
                    }
                })
            };
        }
    }
});

- Tayyeb