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

版权声明:大家好,我是笨笨,笨笨的笨,笨笨的笨,转载请注明出处,谢谢! 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('');
        }
    }
});

猜你喜欢

转载自blog.csdn.net/jx520/article/details/82219398