Select2 V.4：搜索框未获得焦点打开

Question

我第一次在我的项目中使用select2，我认为我满足了我的许多项目要求。但是，有一件事不是在他们的搜索框中。

当我点击 select2 元素时，下拉菜单打开了，但我无法在他们的输入框中输入任何内容，除非我点击他们的搜索。

这是我的示例代码：

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    width: 370
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

通过检查问题控制台，它根本没有显示任何相关问题，为什么它没有按预期工作？请各位帮忙，谢谢

Answer 1

亲爱的 jquery 3.5.X 与 select2 有冲突，我添加了一个小修复，请使用下面的 jquery 代码来满足您的要求。

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    width: 370
  });       
});
$(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Select2 V.4：搜索框未获得焦点打开

Select2 V.4: Search box is not got focus on open

javascript

jquery-select2