Javascript 使用带标记的select2 jquery插件：true，如何防止已选择的选项显示在下拉列表中？

我正在从另一个插件迁移到另一个插件，但有一个差距，我正在试图找出select2是否可以支持

让我们看一个例子。假设我从Ajax请求返回服务器端的选择列表是

"Dog", "Cat", "Monkey", "Giraffe"

在我使用的旧插件中，当我选择其中一个选项（比如Cat）并显示在文本框中后，下次我搜索相同的部分字符串（比如Ca）时，它不会在选项下拉列表中显示Cat，因为它知道您之前已经选择了它

无论您是否已经选择了该项目，在搜索时，select2似乎仍会在下拉列表中显示该项目。Select2确实会阻止你在点击enter后输入if，但这似乎有点不直观，因此我试图找出Select2是否有办法从其他插件复制相同的行为，而这些插件甚至没有显示选项

作为这项工作正常的另一个例子，问题的stackoverflow标记部分也做了正确的事情。如果我将jquery添加到这个问题的标记列表中，然后再次搜索jquery，它不会在列表中显示它，因为它已经被选中了。这就是我想要的行为

这是我当前的select2代码：

HTML:

---

我认为在templateResult函数中，有一种方法可以返回false，或者如果该项已经被选中，则不显示该项。如果在网上或文档中找不到任何内容，您应该查看更改templateResult函数

templateResult函数应该返回一个包含要显示的文本的字符串，或者返回一个包含应该显示的数据的对象，例如jQuery对象。它还可以返回null，这将阻止该选项显示在结果列表中

---

你可以像下面这样简单地实现这一点

您需要使用CSS隐藏选定的选项

$“选择”。选择2； .select2容器默认值。选择2-results\u选项[aria selected=true]{ 显示：无； } 第一 第二 第三 第四

---

听起来你在找。使用一个将允许您在向用户显示下拉项之前过滤下拉项

var$t=$‘目标’； $t.select2{ 多重：对， 标签：是的， 数据：[馅饼、意大利面、海报]， 匹配器：函数参数，选项{ 所选变量=$t.select2'data'； var options selected=selected.somefunctionitem{ return item.text==option.text； }; 如果选择的选项返回false； 返回选项； } }; 目标{ 宽度：100%； }

---

谢谢你，詹姆斯。我已经用似乎有效的解决方案更新了你的答案。如果您发现我的解决方案有任何问题或有其他建议，请告诉我。事实上，我刚刚意识到我添加到您的问题中的上述答案不起作用，就好像您删除了一个标记，它仍然显示在列表中，因此您会遇到一个问题，如果您删除了一个标记并希望将其重新添加，它将不允许您。。所以我回到了画板上。你知道如何防止吗？对不起，我不知道：我以前从未使用过，但从阅读文档来看，它似乎会起作用。这是一个有效的技巧，但它可能会导致其他问题，如键盘选择。嘿，别担心，我在项目中使用了它，但在其他情况下，我无法编写此技巧。视工作需要而定。祝你好运！你知道自定义匹配器与在templateResult函数中返回null有什么区别吗？@leora我查看了文档并进行了一些调试，两者都是可行的选项，因为它们提供了一些重复的功能。从文档中：[Select2使用]匹配器确定是否应显示[每个结果]。templateResult还可以返回null，这将阻止该选项显示在结果列表中。如你所见，它们允许用户通过不同的路径做同样的事情。为什么库是这样设计的还不太清楚，但原因可能是如果您只想在次要细节中更改其中一个或另一个，那么它很容易使用。

<select id="Tags" name="Tags" multiple="multiple">
</select>

function SetupAppTags() {
$("#Tags").select2({
    theme: "classic",
    width: "98%",
    tags: true,
    ajax: {
        url: "/Tag/Search",
        dataType: 'json',
        delay: 300,
        data: function(params) {
            return { q: params.term };
        },
        processResults: function(data, params) {
            return { results: data };
        },
        cache: false
    },
    escapeMarkup: function(markup) { return markup; },
    minimumInputLength: 3,
    templateResult: tagFormatResult,
    templateSelection: tagSelectionResult
});
}

function tagFormatResult(tag) {

   if (tag.loading) {
    return "Loading . . .";
} else {
    if (tag.name) {
        return tag.name;
    }
    return tag.text + " [NEW]";
}
}

function tagSelectionResult(tag) {
    if (tag.name) {
     return tag.name;
  }
   return tag.text;
}