当我们点击 select 2 下拉菜单时，将焦点设置为搜索文本字段

Question

我正在使用 select2.js Version: 3.4.3 with bootstrap 我有一个下拉菜单。

当我点击下拉菜单时，我得到了带有搜索文本字段的列表。但是我的光标没有集中在搜索文本字段上。

<form:select path="yearAge" id="yearAgeId"
    cssClass="form-control search-select static-select">
    <form:option value="">Years</form:option>
    <c:forEach var="i" begin="1" end="125"  >
    <form:option value="${i}" label="${i}"></form:option>
    </c:forEach>     
</form:select>


$(".search-select.static-select").select2({
    placeholder: $(this).attr('placeholder'),
    allowClear: true
});

当我单击下拉光标时，焦点应设置为自动搜索文本字段。

谢谢...！！！！！

Answer 1

尝试这个

$(document).on('select2:open', (e) => {
    const selectId = e.target.id

    $(".select2-search__field[aria-controls='select2-" + selectId + "-results']").each(function (
        key,
        value,
    ){
        value.focus();
    })
})

Answer 2

如果 jQuery 3.6.0 导致了这个，你可以使用这个：

 $(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
  });

Answer 3

测试并使用jQuery 3.6.0：

$(document).on("select2:open", () => {
  document.querySelector(".select2-container--open .select2-search__field").focus()
})

Answer 4

这就是我在全球范围内修复的方法

$(document).on('select2:open', (e) => {
        const selectId = e.target.id;
        $(".select2-search__field[aria-controls='select2-"+selectId+"-results']").each(function (key,value,){
            value.focus();
        });
    });

Answer 5

不要在 DOM 中搜索该元素。相反，$search直接从引发事件的实例获取元素select2:open。由于该错误仅发生在单个选择中，因此您还应该排除多个选择：

$(document).on('select2:open', e => {
    const select2 = $(e.target).data('select2');
    if (!select2.options.get('multiple')) {
        select2.dropdown.$search.get(0).focus();
    }
});

Answer 6

我尝试了 google 和 stackoverflow 上的所有建议，并花了 4 个小时。唯一有效的方法是将 jQuery 从 3.6 降级到 3.5

"jquery": "^3.6.0" -> "jquery": "3.5.1"

只需放置此即可节省时间

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js

Answer 7

这个问题可以通过使用 setTimeout() 函数延迟 focus() 的执行时间来解决，我们可以通过修改select2.js中第 # 3321 行的函数来实现这一点

container.on('open', function () {
  self.$search.attr('tabindex', 0);
  //self.$search.focus(); remove this line
  setTimeout(function () { self.$search.focus(); }, 10);//add this line

});