Select2无唯一ID时，实现打开后自动聚焦搜索框

针对你遇到的「Select2无唯一ID时，原方案无法自动聚焦搜索框」的问题，提供两个可靠的解决方案，均支持多Select2共存场景：

方案一：通过Select2实例直接操作（推荐） #

利用Select2自身的实例关联，无需依赖任何ID/Name属性，兼容性更强：

$(document).on('select2:open', function(e) {
  // 获取当前触发事件的select对应的Select2实例
  const select2Instance = $(e.target).data('select2');
  // 定位到搜索框并设置焦点
  select2Instance.$dropdown.find('.select2-search__field').focus();
});

优势 #

• 完全不依赖原select的ID、Name等属性，适配所有场景
• 精准定位当前打开的Select2组件的搜索框，不会影响其他实例
• 兼容Select2 4.x全版本（含你使用的4.0.13）及jQuery 3.x版本

方案二：利用DOM属性关联定位 #

基于原select和搜索框的aria-owns/aria-controls属性关联关系实现：

$(document).on('select2:open', function(e) {
  const targetSelect = e.target;
  // 获取原select指向的下拉结果容器ID
  const resultsContainerId = targetSelect.getAttribute('aria-owns');
  // 通过aria-controls匹配对应的搜索框并聚焦
  $(`.select2-search__field[aria-controls="${resultsContainerId}"]`).focus();
});

原理 #

无论原select是否有ID，Select2都会给它添加aria-owns属性，指向对应下拉结果容器的ID；而搜索框的aria-controls属性正好等于这个ID，通过这个关联可以精准找到当前组件的搜索框。

内容的提问来源于stack exchange，提问作者bhttoan