现在,如果用户输入已经存在的标签,并且我有标签：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]";
}
}
解决方法
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;
}
