Question

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

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

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

在我使用的旧插件中，在我选择其中一个选项（让我们说＆＃34; Cat＆＃34;）并显示在文本框中，下次我搜索相同的部分字符串（让说＆＃34; Ca＆＃34;），它有＆＃34; T有＆＃34; Cat＆＃34;出现在选择的下拉中（因为它知道你之前已经选择过它）

似乎select2在搜索时仍显示下拉列表中的项目，无论您是否已选择它。 Select2确实阻止输入，如果你输入后输入但这似乎有点不直观，所以我试图找出是否有一种方法让select2从另一个插件复制相同的行为（选择甚至不显示）

作为另一个正常工作的例子，问题的stackoverflow标记部分也做了正确的事情。如果我添加＆＃34; jquery＆＃34;到我的这个问题的标签列表，然后搜索＆＃34; jquery＆＃34;再次， DOESN＆＃34; 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或者某些内容，如果已经选择了该项，则不显示该项。这样的事情是可能的（无法在网上或在文档中找到任何东西）

Answer 1

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

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>

Answer 2

您应该考虑更改templateResult功能...

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

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

Answer 3

你可以像下面这样实现这个目标，

您需要使用 CSS

隐藏所选选项

＆＃13;

$('select').select2();

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: