Javascript Select2 用于创建新标签的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28656977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 Event for creating a new tag
提问by harryg
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 createTagevent 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.
是否有类似的事件仅在完成输入新标签时触发？即它被一个灰色的盒子包围着。
回答by Artur Filipiak
I can't find any nativemethod 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({
// ...
});
}
});
[EDIT]
(Small update: see @Alexcomment below)
[编辑]
（小更新：请参阅下面的@Alex评论）
The above will work only if the tag is added with mouse. For tags added by hitting spaceor comma, use changeevent.
以上仅在使用鼠标添加标签时才有效。对于通过点击空格或逗号添加的标签，请使用change事件。
Then you can filter optionwith data-select2-tag="true"attribute (new added tag):
然后您可以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 ...
});
}
});
回答by Tebe
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.
它使用的事实是，当创建新术语时，它始终是一个对象。
