Django Autocomplete Light在Bootstrap 5模态框中功能异常问题

问题本质 #

Bootstrap 5模态框的层级和焦点管理逻辑，和DAL的下拉组件天生冲突：

• 初始下拉在模态框后面：DAL下拉的z-index默认比模态框（默认1055）低
• 调z-index后搜不了：模态框的焦点拦截逻辑会抢DAL搜索框的焦点，哪怕删了tabindex="-1"也没用

一步步解决 #

1. 给DAL指定下拉父容器+调层级 #

在模板里给DAL字段初始化时，把下拉的父容器设为模态框，同时强制把下拉的z-index设得比模态框高：

<!-- 模态框里的DAL表单字段 -->
{{ form.your_autocomplete_field }}

<script>
document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('你的模态框ID');
  const autocompleteInput = document.querySelector('.自定义的DAL输入框类名');
  
  if (autocompleteInput && modal) {
    const autocomplete = new djangoAutocompleteLight.Autocomplete(autocompleteInput, {
      dropdownParent: modal,
    });
    // 把下拉层级设得比模态框高
    autocomplete.dropdown.element.style.zIndex = '1060';
  }
});
</script>

2. 修复焦点被抢的问题 #

别删模态框的tabindex="-1"（删了模态框焦点管理会乱），而是在下拉展开时强行让DAL搜索框获取焦点：

document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('你的模态框ID');
  const autocompleteInput = document.querySelector('.自定义的DAL输入框类名');
  
  if (autocompleteInput && modal) {
    const autocomplete = new djangoAutocompleteLight.Autocomplete(autocompleteInput, {
      dropdownParent: modal,
    });
    
    // 下拉展开后，延迟100ms让搜索框获焦，避开模态框的焦点拦截
    autocomplete.dropdown.on('show', function() {
      setTimeout(() => {
        autocomplete.input.focus();
      }, 100);
    });
    
    autocomplete.dropdown.element.style.zIndex = '1060';
  }
});

3. 检查DAL表单定义是否正确 #

确保forms里用的是DAL的专用组件：

# forms.py
from django import forms
from dal import autocomplete
from .models import 你的模型类

class 你的表单类(forms.ModelForm):
    自动完成字段名 = forms.ModelChoiceField(
        queryset=你的模型类.objects.all(),
        widget=autocomplete.ModelSelect2(
            url='你的自动完成接口URL',
            attrs={
                'data-placeholder': '输入关键词搜索',
                'class': 'form-control 自定义的DAL输入框类名',
            }
        )
    )

    class Meta:
        model = 你的模型类
        fields = ['自动完成字段名']

4. 可选：调整模态框CSS避免裁剪下拉 #

如果下拉被模态框边框挡住，加这段CSS：

.modal {
  overflow: visible !important;
}

.modal-content {
  overflow: visible !important;
}

验证要点 #

• 打开模态框点DAL字段，下拉要在模态框前面
• 搜索框能正常输入并出结果
• 模态框其他功能（关闭、背景点击）正常

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