当使用jquery select2插件时,如果已经列出了ajax调用的有效值,我该如何防止选择新的标签？

我使用 select2 version 4与多个选择,我支持用户添加新的标签,但我想阻止人们选择一个新的标签,如果该标签已经存在于我的后端.

现在,如果用户输入已经存在的标签,并且我有标签：true,那么它在下拉列表中显示两个项目(现有的和新的).这是一个例子：

你可以看到,“testTag2”是我后端的一个有效的标签,所以它显示在选择中,但是由于templateResult函数和标签：true它也显示为第二个项目(使用户认为他们可以选择它作为一个新的标签).

有没有办法只在下拉列表中显示“新”标签选项,如果该文本没有列在下拉列表中作为另一个选项？

这是我的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 . . . <img src='/Content/Images/ajax-loader.gif' />";
} else {

    if (tag.name) {
        var existsAlready = $("#Tags option[value='" + tag.id + "']").length > 0;
        if (existsAlready) {
            return null;
        }
        return tag.name;
    }

    var length = $('#tagsContainer .select2-selection__choice').filter(function () {
        return $(this).attr("title").toupperCase() === person.text.toupperCase();
    }).length;

    if (length == 1) {
        return null;
    }
    return tag.text + " [NEW]";
}

}

解决方法

根据Select2 Options

Change how options are matched when searching When users filter down
the results by entering search terms into the search Box,Select2 uses
an internal “matcher” to match search terms to results. When a remote
data set is used,Select2 expects that the returned results have
already been filtered.

Key matcher Value A function taking search params and the data object.
Select2 will pass the individual data objects that have been passed
back from the data adapter into the matcher individually to determine
if they should be displayed. Only the first-level objects will be
passed in,so if you are working with nested data,you need to match
those individually.

matcher: function (params,data) {
  // If there are no search terms,return all of the data
  if ($.trim(params.term) === '') {
    return data;
  }

  // `params.term` should be the term that is used for searching
  // `data.text` is the text that is displayed for the data object
  if (data.text.indexOf(params.term) > -1) {
    var modifiedData = $.extend({},data,true);
    modifiedData.text += ' (matched)';

    // You can return modified objects from here
    // This includes matching the `children` how you want in nested data sets
    return modifiedData;
  }

  // Return `null` if the term should not be displayed
  return null;
}

我认为这是你的典型案例,除了你应该用(“”)替换(“匹配”),然后添加else来添加你的案例中的“[NEW]”.

来自ajax调用的返回数据应该是您的匹配器的输入.

所以你的代码应该是：

matcher: function (params,true);
   //match was found then just show it.
   // modifiedData.text += ' (matched)';

    // You can return modified objects from here
    // This includes matching the `children` how you want in nested data sets
    return modifiedData;
  }
   else
  {
   //there is not match found,suggest adding NEW Tag.
    modifiedData.text += '[NEW]';
    return modifiedData;
  }

  // Return `null` if the term should not be displayed
  return null;
}