TextOnly jquery select2输入

Question

我想创建一个jQuery Select2输入表单元素，其中输入将只接受文本值，而不是数字，也不是特殊字符。

我尝试使用其官方文档页面中提供的html模式无济于事。

[请帮助我在jQuery Select2表单字段上添加仅字母约束。

Answer 1

尝试一下...

$(this).val($(this).val().replace(/[^a-z]/g,''));

if(event.which < 97 /* a */ || event.which > 122 /* z */) {
    event.preventDefault();
}

$(".select2").select2({
    tags: true,
    allowClear: true
});

$(document).on('keypress', '.select2-search__field', function () {
    $(this).val($(this).val().replace(/[^a-z]/g,''));

     if(event.which < 97 /* a */ || event.which > 122 /* z */) {
        event.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class='select2' style='min-width: 100px;'>
  <option/>
  <option>Red</option>
  <option>White</option>
  <option>Blue</option>
  <option>Read</option>
</select>

Answer 2

使用data('select2')和input事件

var select = $('select')
  .select2()
  .data('select2')

select.dropdown.$search.on('input', function() {
  this.value = this.value.replace(/[^a-z]/g,'')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select" style="width:100%">
  <option value="Alaska">Alaska</option>
  <option value="Alaska">Alaska</option>
  <option value="California">California</option>
  <option value="Nevada">Nevada</option>
  <option value="Oregon">Oregon</option>
  <option value="Washington">Washington</option>
  <option value="Arizona">Arizona</option>
</select>