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

Question

我正在使用带有引导程序的select2.js版本：3.4.3 我有一个下拉。

当我点击下拉列表时，我得到了包含搜索文本字段的列表。 但我的光标并不专注于搜索文本字段。

<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

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

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

Answer 2

这个问题可以通过使用setTimeout（）函数延迟focus（）执行时间来解决，我们可以通过在＃3321行修改 select2.js 中的函数来实现这个目的。 >

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

});

Answer 3

试试这个

$(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 4

在调用select2函数强制焦点到特定搜索字段后，只需添加一个自定义的jQuery行。只需将'#target'替换为搜索输入字段的ID。

$( "#target" ).focus();

Answer 5

对于 NPM 或 Laravel：当我在 Laravel 应用程序中使用 NPM 包管理器时，我必须在 package.json 中将 jQuery 从 3.6 恢复到 4.5.1，然后运行 ​​npm install 和 npm run prod。然后问题解决了。

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