Select2事件用于创建新标签

I'm using the jQuery Select2 (v4) plugin for a tag selector.

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

I want to listen for when a new tag is created in the select element and fire an ajax request to store the new tag. I discovered there is the createTag event but this seems to fire every time a letter is entered into the select2 element. As shown in my fiddle: http://jsfiddle.net/3qkgagwk/1/

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

Is there a similar event that only fires when the new tag has finished being entered? I.e. it's enclosed by a grey box enclosing it.

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

2 个解决方案

#1

I can't find any native method unfortunately. But if you're interested in simple "workarounds", maybe this get you closer:

遗憾的是,我找不到任何原生方法。但如果你对简单的“变通办法”感兴趣,也许这会让你更接近:

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

[EDIT]
(Small update: see @Alex comment below)

[编辑](小更新:请参阅下面的@Alex评论)

The above will work only if the tag is added with mouse. For tags added by hitting space or comma, use change event.

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

Then you can filter option with data-select2-tag="true" attribute (new added tag):

然后,您可以使用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

#2

Another workaround. Just insert it to the beginning:

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

           }).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);
            ........

It relies on underscore.js for checking if it's string or not. You can replace _.isString method with whatever you like.

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

It uses the fact that when new term is created it's always an object.

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

#1