javascript - 用于创建新标签的 Select2 事件

Question

我正在使用 jQuery Select2 (v4) 标签选择器插件。

我想监听何时在 select 元素中创建新标签并触发 ajax 请求以存储新标签。我发现有 createTag 事件，但每次在 select2 元素中输入一个字母时，这似乎都会触发。如我的 fiddle 所示:http://jsfiddle.net/3qkgagwk/1/

是否有类似的事件仅在新标签输入完成时触发？ IE。它被一个灰色的盒子包围着。

Answer 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

---

[编辑]
(小更新:见下方 @Alex 评论)

只有用鼠标添加标签时，以上内容才有效。对于通过点击 space 或 comma 添加的标签，使用 change 事件。

然后你可以使用 data-select2-tag="true" 属性(新添加的标签)过滤 option:

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

DEMO 2