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

【问题标题】：Set focus to search text field when we click on select 2 drop down当我们单击选择 2 下拉菜单时，将焦点设置为搜索文本字段
【发布时间】：2014-11-11 01:01:43
【问题描述】：

我正在使用 select2.js 版本：3.4.3 和 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
});

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

谢谢...！！！！！！

【问题讨论】：

标签： jquery html twitter-bootstrap jquery-select2

【解决方案1】：

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

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

【讨论】：

当您使用带有multiple 标志的selects 时，将选择器更改为input.select2-search__field。
这为我节省了很多时间。由于这可能是 select2 和 jQuery 3.6.0 的版本组合存在的问题，因此将来的某些版本可能会允许您再次仅使用 jQuery 选择器来执行此操作。在我看到这个答案并找到 github.com/select2/select2/issues/5993#issuecomment-800927000 之前，我无法弄清楚为什么 jQuery 选择器不起作用
小而有用的改进。它避免了标签if (!event.target.multiple) { $('.select2-container--open .select2-search--dropdown .select2-search__field').last()[0].focus() }的问题
如果页面有多个 select-2 选择框并且您在它们之间切换，则它不起作用。
不幸的是，iOS / iPadOS 15.4 中的移动 safari 失败了。请参阅我的答案以获取替代方案。

【解决方案2】：

试试这个

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

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

【讨论】：

这是唯一一个混合了单选和多选框选的页面的解决方案。 @hammad-ahmed-khan 当您只有单选下拉菜单但使多选混乱时，上面的答案非常好。这与 select2 只有一个搜索框用于所有单选并在每个下拉菜单中重复使用它的方式有关，但多选始终显示其搜索框。

【解决方案3】：

测试并使用 jQuery 3.6.0：

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

【讨论】：

它对我有用。我的 jQuery 版本是 3.6.0，select2 版本是 4.1.0-rc.0
只有在页面中有一个 select2 时才有效

【解决方案4】：

这个问题可以通过使用 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

});

【讨论】：

如果页面有一个或多个 select2-select 框，这是正确的答案。+1

【解决方案5】：

对于 NPM 或 Laravel：由于我在 Laravel 应用程序中依赖 NPM 包管理器，因此我必须在 package.json 中将 jQuery 从 3.6 恢复到 3.5.1，然后运行 npm install 和 npm run prod。然后问题就解决了。

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

$(".search-select.static-select").select2(....);页面加载后的上一行调用（仅一次）但是当我点击下拉时我需要集中注意力
向选择添加点击事件，点击时将焦点添加到输入字段。 $('select').click(function () { $( "#target" ).focus() });
我无法获取目标，因为它是在我单击下拉菜单时创建的

【解决方案7】：

$(document).on('select2:open', (e) => {
    var c = e.target.parentElement.children
    for (var i = 0; i < c.length; i++) {
        if (c[i].tagName === 'SPAN') {
            c = c[i].children
            break
        }
    }
    for (var i = 0; i < c.length; i++) {
        if (c[i].tagName === 'SPAN' && c[i].className === 'selection') {
            c = c[i].children
            break
        }
    }
    for (var i = 0; i < c.length; i++) {
        c = c[i]
    }

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

【讨论】：

【解决方案8】：

this 答案中的方法在 iOS/iPadOS 15.4 中中断。

一种可行的替代方法是直接监听父级上的点击事件并从那里触发焦点：

document.querySelector("#your-select-field-id").parentElement.addEventListener("click", function(){
    const searchField = document.querySelector('.select2-search__field');
    if(searchField){
        searchField.focus();
    }
});

【讨论】：