javascript – Select2创建新标签的事件

我使用jQuery Select2(v4)插件作为标签选择器.

我想要在select元素中创建一个新标签并触发ajax请求来存储新的标签.我发现有createTag事件,但这似乎每当一个字母被输入到select2元素时都会触发.如我的小提琴：http://jsfiddle.net/3qkgagwk/1/

有没有类似的事件,只有在新标签输入完成时才会触发？即它被一个包围它的灰色框包围.

解决方法

我不能找到任何本机方法不幸的是.但是,如果您对简单的“解决方法”感兴趣,也许这样可以使您更加接近：

$('.select2').select2({
    tags: true,tokenSeparators: [","," "],createTag: function (tag) {
        return {
            id: tag.term,text: tag.term,// add indicator:
            isNew : true
        };
    }
}).on("select2:select",function(e) {
    if(e.params.data.isNew){
        // append the new option element prenamently:
        $(this).find('[value="'+e.params.data.id+'"]').replaceWith('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>');
        // store the new tag:
        $.ajax({
            // ... 
        });
    }
});

DEMO

[编辑]

只有使用鼠标添加标签,才能使用上述功能.对于通过按空格或逗号添加的标签,请使用更改事件.

然后,您可以使用data-select2-tag =“true”属性(新添加的标签)过滤选项：

$('.select2').select2({
    tags: true," "]
}).on("change",function(e) {
    var isNew = $(this).find('[data-select2-tag="true"]');
    if(isNew.length){
        isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>');
        $.ajax({
            // ... store tag ...
        });
    }
});

DEMO 2