解决select2-rails中文输入bug问题

收藏文章 点赞鼓励

bug表现

1、最多只能输入一个中文字,后面的强制就变成了英文字母。
2、输入时字数较多输入行就会显示不全。

解决方法

app/views/account/posts/_form.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//解决输入中文问题。
$(function() {
  $('#post_tag_list').select2({tags: [],
                               theme: "bootstrap",
                               createTag: function(params) {//解决部分浏览器开启 tags: true 后无法输入中文的BUG
                                 if (/[;]/.test(params.term)) {
                                   var str = params.term.trim().replace(/[;]*$/, '');
                                   return { id: str , text: str }
                                 }
                               }
          })
});
//添加了上面这段代码,解决了中文输入,又不可以通过enter键生成tag。添加下面一段代码解决无法回车生成tag的问题。
$(document).on('keyup', '.select2-selection--multiple .select2-search__field', function(event){
        if(event.keyCode == 13){//这个是回车键的键值,如果要按其他键,把键值换成其他键值就可以了
            var $this = $(this);
            var optionText = $this.val();//输入内容的value值
            //如果没有就添加
            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);//定义一个新的option,设置option的值是输入框的内容
                 $select.append(newOption).trigger('change');//在插入的时候同时生成标签
                 $this.val('');//清空输入框的内容
            }
        }
    });
//解决输入中文显示不全问题。
$(document).on('keyup', '.select2-selection--multiple .select2-search__field', function(event){
    var $this = $(this);
    $this.css('width', '20em');// 写个大点的值就行了。不用计算。
});

效果呈现

file

参考文章

select2插件开启tag为true后,输入中文问题
解决 select2 开启 tags 输入中文显示不全的BUG

评论区