使用带有标签的select2 jquery插件：true，您如何防止选择出现在已选择的下拉列表中？

Posted 2023-05-07

【中文标题】使用带有标签的select2 jquery插件：true，您如何防止选择出现在已选择的下拉列表中？

【英文标题】：With select2 jquery plugin with tags:true, how can you prevent choices from showing up in the dropdown that are already selected?

【发布时间】：2015-12-24 04:48:50

【问题描述】：

我正在从另一个插件迁移到 select2 to use as a tagging plugin，但我正在尝试确定 select2 是否可以支持。

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

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

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

看起来 select2 在搜索时仍会在下拉列表中显示该项目，无论您是否已经选择了它。如果在您按 Enter 后，Select2 确实会阻止输入，但这似乎有点不直观，所以我试图弄清楚 select2 是否有办法从其他插件复制相同的行为（甚至没有出现选择）

作为正常工作的另一个示例，问题的 *** 标记部分也做了正确的事情。如果我将“jquery”添加到这个问题的标签列表中，然后再次搜索“jquery”，它 DOESN"T 会在列表中显示（因为它已经被选中）。那是我正在寻找的行为。

这是我当前的 select2 代码：

HTML：

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

Javascript：

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;

我认为在 templateResult 函数中有一种方法可以返回 false 或不显示该项目（如果它已被选中）。这样的事情可能吗（在网上或文档中找不到任何东西）

【参考方案1】：

听起来您正在寻找a custom matcher。使用 one 将允许您在将下拉项显示给用户之前对其进行过滤。

var $t = $('#target');
$t.select2(
  multiple: true,
  tags: true,
  data: ["Pasty", "Pasta", "Posters"],
  matcher: function(params, option) 
    var selected = $t.select2('data');
    var optionSelected = selected.some(function(item) 
      return (item.text === option.text);
    );
    if (optionSelected) return false;
    return option;
  
);

#target 
  width: 100%;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<select id="target"></select>

【讨论】：

您知道自定义匹配器与在 templateResult 函数中返回 null 的区别吗？

@leora 我浏览了文档并进行了一些调试，两者都是可行的选项，因为它们提供了一些重复的功能。来自文档：“[Select2 使用]matcher 来确定是否应该显示[每个结果]。” “templateResult 也可以返回null，这将防止该选项不会显示在结果列表中。” 如您所见，它们允许用户通过不同的路径执行相同的操作。为什么这个库被设计成这样不是很清楚，但如果你只想在小细节上改变一个或另一个，原因可能是易于使用。

【参考方案2】：

您应该考虑更改 templateResult 函数...

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

https://select2.github.io/options.html#templateSelection

【讨论】：

感谢詹姆斯。我已经用似乎可行的解决方案更新了 ytour 的答案。如果您发现我的解决方案有任何问题或有其他建议，请告诉我

实际上，我刚刚意识到我在您的问题中添加的上述答案 DOESN"T work as if you remove a tag 它仍然显示在列表中，因此您会遇到一个问题，如果您删除标签并且想把它加回来，它不允许你..所以我又回到了绘图板上。你知道我该如何防止吗？

对不起，我没有：（我以前从未使用过，但从阅读文档看来它可以工作

【参考方案3】：

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

您需要使用 CSS

隐藏选定的选项

$('select').select2();

.select2-container--default .select2-results__option[aria-selected=true] 
    display: none;

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select id="Tags" name="Tags" multiple="multiple">
  <option value="1">first</option>
  <option value="2">second</option>
  <option value="3">third</option>
  <option value="4">fourth</option>
</select>

【讨论】：

这是一个有效的技巧，但它可能会导致其他问题，如键盘选择。

嘿，别担心，我在一个项目中制作它并且它可以工作，但在其他情况下我无法编写这个技巧。根据OP的需要。祝你好运！