解决 select2 部分浏览器开启 tags: true 后无法输入中文的BUG + 解决输入中文后无法回车结束的问题

在网上找了很久,东拼西凑得出的解决方案。感觉并不优美,能将就实现也知足了。

明确的说告诉你这是 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('');
		}
	}
});

相关BUG

解决 select2 开启 tags 输入中文显示不全的BUG

一不做二不休,再来个广告吧
在这里插入图片描述

你可能感兴趣的:(Javascript,#,jQuery)