Django Autocomplete Light：ModelSelect2Multiple高度无法扩展求助

针对Django中ModelMultipleChoiceField搭配autocomplete.ModelSelect2Multiple部件时，多选条目过多导致输入框无法自动撑开高度的问题，有以下几种实用解决方法：

方法1：自定义CSS样式（最直接） #

Select2的多选容器默认设置了固定高度，我们可以通过CSS修改让它随内容自适应：

/* 移除多选容器的固定高度，保留最小高度以对齐表单控件 */
.select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: 38px; /* 可根据你的表单样式调整 */
}

/* 允许内部标签换行，并让内容区域撑满容器 */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 4px 12px;
    white-space: normal;
}

如果不想影响页面上所有Select2控件，可以给目标Widget添加自定义类，再针对性写CSS：

# forms.py
class YourForm(forms.Form):
    your_model_field = forms.ModelMultipleChoiceField(
        queryset=YourModel.objects.all(),
        widget=autocomplete.ModelSelect2Multiple(
            attrs={'class': 'auto-expand-select2'}
        )
    )

对应的CSS改为：

.select2-container--default .auto-expand-select2 + .select2-container .select2-selection--multiple {
    height: auto !important;
    min-height: 38px;
}

方法2：JavaScript动态调整高度（处理动态更新场景） #

如果CSS在某些动态增删条目的场景下没及时生效，可以通过监听Select2的事件来实时调整高度：

// 监听条目选择/取消事件
$('.auto-expand-select2').on('select2:select select2:unselect', function() {
    const $selectContainer = $(this).next('.select2-container');
    const $selection = $selectContainer.find('.select2-selection--multiple');
    const $content = $selection.find('.select2-selection__rendered');
    
    // 把容器高度设为内容高度，加上padding的余量
    $selection.height($content.outerHeight() + 4);
});

// 页面初始化时执行一次，确保初始状态高度正确
$(document).ready(function() {
    $('.auto-expand-select2').each(function() {
        const $selectContainer = $(this).next('.select2-container');
        const $selection = $selectContainer.find('.select2-selection--multiple');
        const $content = $selection.find('.select2-selection__rendered');
        
        $selection.height($content.outerHeight() + 4);
    });
});

方法3：结合Select2配置优化 #

在初始化Select2时，可以开启tags模式（如果需要自定义条目）或者调整maximumSelectionLength限制，但这只是辅助手段，核心还是CSS/JS的高度调整。另外，确保你的Select2版本是较新的，旧版本可能存在样式兼容问题。

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