Django Admin自动完成字段选择器聚焦异常及回退方案咨询

Django 4.x及以上版本调整了Admin自动完成组件的交互逻辑，取消了点击选择器标题时自动聚焦搜索框的行为。要恢复旧版本的便捷操作，可以通过以下两种方式实现：

方法一：自定义JavaScript脚本（推荐） #

通过监听选择器标题的点击事件，手动触发搜索框聚焦：

1. 在项目的static/js/目录下创建admin_autofocus_fix.js，写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(e) {
        // 定位自动完成选择器的标题元素
        const selectorHeader = e.target.closest('.select2-selection__rendered');
        if (!selectorHeader) return;
        
        const select2Container = selectorHeader.closest('.select2-container');
        // 延迟执行确保下拉框已渲染完成
        setTimeout(() => {
            const searchInput = select2Container.querySelector('.select2-search__field');
            if (searchInput) searchInput.focus();
        }, 100);
    });
});

2. 在对应的ModelAdmin中引入这个脚本：

from django.contrib import admin
from .models import 你的模型类

class 你的模型Admin(admin.ModelAdmin):
    autocomplete_fields = ['Categoría']  # 替换成你的自动完成字段名
    class Media:
        js = ('js/admin_autofocus_fix.js',)

admin.site.register(你的模型类, 你的模型Admin)

确保静态文件配置正确，运行collectstatic后生效。

方法二：覆盖Admin自动完成模板 #

深度定制组件初始化逻辑，添加Select2的自动聚焦配置：

1. 在项目模板目录下创建admin/widgets/autocomplete.html，复制Django原生模板内容，修改Select2初始化代码，添加dropdownAutoFocus: true：

$(function() {
    $('#{{ widget.attrs.id }}').select2({
        {% if widget.is_hidden %}style: 'display:none'{% endif %}
        {% if widget.attrs.autofocus %}autofocus: true{% endif %}
        {% if widget.attrs.class %}class: '{{ widget.attrs.class }}'{% endif %}
        {% if widget.attrs.style %}style: '{{ widget.attrs.style }}'{% endif %}
        dropdownAutoFocus: true,  // 开启下拉框自动聚焦搜索框
        {% if widget.options %}
        {% include "admin/widgets/select2_options.html" %}
        {% endif %}
    });
});

2. 重启服务后，自动完成组件打开时会自动聚焦搜索框，和旧版本行为一致。

两种方法都能解决车间用户的操作痛点，优先推荐方法一，无需修改模板，侵入性更低。

内容的提问来源于stack exchange，提问作者Antonio Amo Sánchez