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(''); // store the new tag: $.ajax({ // ... }); } });
DEMO
[编辑]
（小更新：请参阅下面的@Alex评论）
只有在使用鼠标添加标记时，上述操作才有效。 对于通过命中空格或逗号添加的标签，请使用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(''); $.ajax({ // ... store tag ... }); } });
演示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方法替换为您喜欢的任何方法。
它使用的事实是，当创建新术语时，它始终是一个对象。