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

只有在使用鼠标添加标记时，上述操作才有效。对于通过点击 space 或逗号添加的标记，请使用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

一个更简单的检查是基于事件的参数的差异......

在我处理这种情况时，我已经看到了这种差异；当创建新元素时，事件 args 数据没有元素对象，但在选择已经可用的选项时存在...

.on('select2:selecting', function (e) {
   if (typeof e.params.args.data.element == 'undefined') {  
      // do a further check if the item created id is not empty..
       if( e.params.args.data.id != "" ){
          // code to be executed after new tag creation
       }
   }
 })

Answer 3

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

           }).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方法替换为您喜欢的任何方法。

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

Answer 4

创建新标签时，唯一对我有用的事件监听器是：

.on("select2:close", function() {
 (my code)
})

这是针对新标签并从列表中选择触发的。 change，select2:select，select2:selecting和其他任何无效。

Select2事件用于创建新标签

4 个答案: