javascript - Select2 4.0 - 按键不触发选择

Question

我已经Select2从一个版本升级到另一个3.5.2版本4.0.

我们有很多表格，其中许多字段由打字员填写。

在旧版本 ( 3.5.2) 中，打字员将使用以下顺序：

1. 专注于元素
2. 输入一个数字
3. 按下Tab以选择结果并移至下一个字段

$("select").select2();

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

<style>
  input {
  display:block;
    margin:10px 0;
  }
</style>

<input type=text/>
<select>
  <option value="1">1. Option A</option>
  <option value="2">2. Option B</option>
  <option value="3">3. Option C</option>
  <option value="4">4. Option D</option>
  <option value="5">5. Option E</option>
</select>

<input type=text/>

在版本4.0上，打字员必须：

1. 专注于元素
2. 打Enter
3. 输入号码
4. 再按Enter一次
5. 按 T​​ab 模糊并移动到下一个字段

$("select").select2();

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

<style>
  input {
    display:block;
    margin:10px 0;
  }  
  
</style>

<input type=text/>

<select>
  <option value="1">1. Option A</option>
  <option value="2">2. Option B</option>
  <option value="3">3. Option C</option>
  <option value="4">4. Option D</option>
  <option value="5">5. Option E</option>
</select>

<input type=text/>

有没有办法解决这种明显的功能降级？我不想求助，v3.5.2因为我<select>在此版本不支持的元素上使用 AJAX（必须改用隐藏<input>标签）

Answer 1

要在焦点上触发 select2 的打开，请使用 jQuery 的原生“focus”事件和 select2“open”事件。重要提示：在 DOM 上制作它已准备就绪。

$( document ).ready(function() {
  
  $(".select2-selection").on("focus", function () { 
      $(this).parent().parent().prev().select2("open"); 
  });
   
});