我使用Select2(版本3.4.0)来填充标签列表.标签通过ajax调用与现有标签进行匹配,我使用createSearchChoice来创建新标签.代码工作到目前为止,看起来像这样：
$(mytags).select2({
multiple: true,placeholder: "Please enter tags",tokenSeparators: [ "," ],ajax: {
multiple: true,url: myurl,dataType: "json",data: function(term,page) {
return {
q: term
};
},results: function(data,page) {
return data;
}
},createSearchChoice: function(term) {
return {
id: term,text: term + ' (new)'
};
},});
除了在createSearchChoice中注明附加(新)外,所有这些都非常标准.我需要用户知道这不是一个预先存在的标签.
它按预期工作：如果我开始输入“new-tag”,我在列表顶部建立了“new-tag(new)”标签,如果我选择它,标签列表包含“new-tag(new )“,如预期.如果标签已经存在,则Select2检测到匹配项,并且不会创建“(new)”选项.按返回或点击匹配按预期工作.
当有匹配时,当我键入逗号(我的单个tokenSeparators条目)时出现问题. Select2关闭该令牌,并将该标签添加到列表中,但附加了“(new)”标签,即使用createSeachChoice的返回值即使不需要.
这是Select2中的错误,还是使用错误(应该怎么办)？
解决方法
你可以自己修改自己的行为.这个想法是,createSearchChoice回调必须能够告诉术语是否指搜索结果.但是createSearchChoice不能直接访问搜索结果,那么我们如何才能实现呢？那么,通过从结果回调中保存最新的一批搜索结果.
var lastResults = [];
$(...).select2({
ajax: {
multiple: true,url: "/echo/json/",type: "POST",data: function (term,page) {
return {
json: JSON.stringify({results: [{id: "foo",text:"foo"},{id:"bar",text:"bar"}]}),q: term
};
},results: function (data,page) {
lastResults = data.results;
return data;
}
},createSearchChoice: function (term) {
if(lastResults.some(function(r) { return r.text == term })) {
return { id: term,text: term };
}
else {
return { id: term,text: term + " (new)" };
}
}
});
该代码使用Array.some,所以你需要比IE8更好的(这是select2最低要求)来运行它,但当然可以模拟行为.
See it in action.
但是,在软膏中有一个飞行：只有当已经收到与当前搜索项对应的搜索结果时,此代码才能正常工作.
这应该是显而易见的：如果您输入的速度非常快,并创建一个与现有标签相对应的搜索字词,但在包含该标记的搜索结果到达之前点击逗号,createSearchChoice将测试标签在先前接收到的搜索结果中的存在.如果这些结果不包含标签,那么标签将被显示为“新”,即使不是.
不幸的是,我不相信有什么可以做,以防止这种情况发生.