Select2事件用于创建新标签

Question

我正在使用jQuery Select2（v4）插件作为标签选择器。

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

是否有类似的事件仅在新标签输入完毕后才会触发？即它被一个封闭它的灰色盒子包围着。

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评论）

只有在使用鼠标添加标记时，上述操作才有效。对于通过命中空格或逗号添加的标签，请使用change事件。

然后你可以用option属性（新添加的标签）过滤data-select2-tag="true"：

$('.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

Answer 2

另一种解决方法。只需将其插入到开头：

           }).on('select2:selecting', function (evt) {

             var stringOriginal = (function (value) {
                // creation of new tag
                if (!_.isString(value)) {
                    return  value.html();
                }
                // picking existing
                return value;
            })(evt.params.args.data.text);
            ........

它依赖于underscore.js来检查它是否是字符串。您可以将_.isString方法替换为您喜欢的任何方法。

它使用的事实是，当创建新术语时，它始终是一个对象。