我使用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('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>');
// store the new tag:
$.ajax({
// ...
});
}
});
[编辑]
只有使用鼠标添加标签,才能使用上述功能.对于通过按空格或逗号添加的标签,请使用更改事件.
然后,您可以使用data-select2-tag =“true”属性(新添加的标签)过滤选项：
$('.select2').select2({
tags: true," "]
}).on("change",function(e) {
var isNew = $(this).find('[data-select2-tag="true"]');
if(isNew.length){
isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>');
$.ajax({
// ... store tag ...
});
}
});