如何在Django 4后台捕获所有select2:open事件？

问题分析 #

你的代码无法捕获select2:open事件，核心原因通常有这几点：

• Django Admin的Select2组件是动态初始化的，你在$(document).ready()中直接绑定$('select')时，部分下拉元素可能还未完成Select2初始化，后续动态加载的元素也无法触发绑定的事件
• 额外引入的jQuery Slim版本和Django Admin自带的jQuery存在版本冲突，导致事件绑定失效
• 事件绑定时机过早，没有等待Select2组件完全渲染完成

解决方案 #

1. 改用事件委托绑定事件 #

针对动态元素的特性，将事件委托绑定到document上，确保能捕获所有（包括后续生成的）Select2组件的select2:open事件：

修改autofocus_select2_searchbars.js代码：

function setFocusOnSearchBarsWhenSelect2WidgetsAreOpen() {
  // 事件委托：监听document上所有select元素的select2:open事件
  $(document).on('select2:open', 'select', () => {
    console.log('select2:open');
    // 延迟10ms执行，确保Select2搜索框已渲染完成
    setTimeout(() => {
      const searchField = document.querySelector('.select2-container--open .select2-search__field');
      if (searchField) searchField.focus();
    }, 10);
  });
}

$(document).ready(function () {
  setFocusOnSearchBarsWhenSelect2WidgetsAreOpen();
});

2. 移除重复的jQuery引入 #

Django Admin本身已经内置了jQuery，额外引入jQuery Slim会导致版本冲突，直接删掉change_form.html中的jQuery引用：

修改change_form.html：

{% extends "admin/change_form.html" %}
{% load i18n admin_urls static %}
{% block admin_change_form_document_ready %}
    {{ block.super }}
    <script>
        {% include "./shared/autofocus_select2_searchbars.js" %}
    </script>
{% endblock admin_change_form_document_ready %}

3. 兼容动态添加的表单行（可选） #

如果你的页面包含动态添加的表单行（比如InlineModelAdmin），可以额外监听formset:added事件，为新生成的下拉框绑定事件：

function setFocusOnSearchBarsWhenSelect2WidgetsAreOpen() {
  // 为已有select绑定事件
  $('select').on('select2:open', handleSelect2Open);
  // 监听动态添加的表单行，为新select绑定事件
  $(document).on('formset:added', (e, $row) => {
    $row.find('select').on('select2:open', handleSelect2Open);
  });
}

function handleSelect2Open() {
  console.log('select2:open');
  setTimeout(() => {
    const searchField = document.querySelector('.select2-container--open .select2-search__field');
    if (searchField) searchField.focus();
  }, 10);
}

$(document).ready(function () {
  setFocusOnSearchBarsWhenSelect2WidgetsAreOpen();
});

验证方式 #

修改完成后刷新Django Admin的修改页面，打开Select2下拉框，查看浏览器控制台是否输出select2:open，同时检查搜索框是否自动获得焦点。

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