jquery-select2 – Select2 with createSearchChoice使用新创建的键盘输入选项,即使给出匹配,错误还是我缺少某些东西?




我使用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中的错误,还是使用错误(应该怎么办)?

解决方法

我不知道这是否是一个错误 – 在任何情况下,在这个时候,GitHub问题跟踪器都没有提到这个行为的公开问题.

你可以自己修改自己的行为.这个想法是,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将测试标签在先前接收到的搜索结果中的存在.如果这些结果不包含标签,那么标签将被显示为“新”,即使不是.

不幸的是,我不相信有什么可以做,以防止这种情况发生.

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...