版权声明:大家好,我是笨笨,笨笨的笨,笨笨的笨,转载请注明出处,谢谢! https://blog.csdn.net/jx520/article/details/82219398
在网上找了很久,东拼西凑得出的解决方案。感觉并不优美,能将就实现也知足了。
明确的说告诉你这是 select2 的BUG,并且目前还没官方修复,今天2018-08-30
至于BUG的原因,解决思路分析什么的,都能搜到这么偏僻的地方,应该早就了解过了。直接给出代码 :
//给select 添加 select2tags。如下初始化
$(".select2tags").select2({
tags: true,//允许手动输入,生成标签
tokenSeparators: [',', ';', ',', ';', ' '],
width: "100%",
maximumSelectionSize: 5,
language: { noResults: function (params) { return "查无结果"; } },
createTag: function(params) {//解决部分浏览器开启 tags: true 后无法输入中文的BUG
if (/[,;,; ]/.test(params.term)) {//支持【逗号】【分号】【空格】结尾生成tags
var str = params.term.trim().replace(/[,;,;]*$/, '');
return { id: str, text: str }
} else {
return null;
}
}
});
//解决输入中文后无法回车结束的问题。
$(document).on('keyup', '.select2-selection--multiple .select2-search__field', function(event){
if(event.keyCode == 13){
var $this = $(this);
var optionText = $this.val();
//如果没有就添加
if(optionText != "" && $this.find("option[value='" + optionText + "']").length === 0){
//我还不知道怎么优雅的定位到input对应的select
var $select = $this.parents('.select2-container').prev("select");
var newOption = new Option(optionText, optionText, true, true);
$select.append(newOption).trigger('change');
$this.val('');
}
}
});