如何在Django中实现带搜索功能的多选标签表单（基于django-taggit）

你当前代码的问题在于用了普通的ModelMultipleChoiceField和SelectMultiple组件，只能生成基础多选下拉框，没有搜索功能。而且django-taggit本身提供了专门处理标签的字段，不需要手动基于Tag模型构建多选框。下面是两种可行的解决方案：

方案一：结合Select2前端组件（快速实现） #

1. 修正forms.py代码 #

改用django-taggit的TagField和TagWidget，同时给组件添加前端类名：

from django import forms
from taggit.forms import TagField, TagWidget
from .models import Question

class QuestionForm(forms.ModelForm):
    tags = TagField(
        label='标签',
        widget=TagWidget(attrs={'class': 'form-control select2-tag'}),
        help_text='输入标签，多个标签用逗号分隔'
    )

    class Meta:
        model = Question
        fields = ['title', 'content', 'anonymous', 'tags']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control form-control-lg'}),
            'content': forms.Textarea(attrs={'class': 'form-control'}),
        }

2. 前端配置Select2 #

把Select2的CSS和JS下载到项目静态目录后，在form.html中引入并初始化：

<link rel="stylesheet" href="{% static 'select2/css/select2.min.css' %}">
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'select2/js/select2.min.js' %}"></script>

<script>
$(function() {
    $('.select2-tag').select2({
        tags: true, // 允许创建新标签
        tokenSeparators: [','], // 用逗号分隔多个标签
        placeholder: "选择或输入标签",
        width: '100%'
    });
});
</script>

<!-- 渲染表单字段 -->
<div class="form-group">
    {{ form.title.label_tag }}
    {{ form.title }}
</div>
<div class="form-group">
    {{ form.content.label_tag }}
    {{ form.content }}
</div>
<div class="form-group">
    {{ form.anonymous.label_tag }}
    {{ form.anonymous }}
</div>
<div class="form-group">
    {{ form.tags.label_tag }}
    {{ form.tags }}
</div>

方案二：使用django-autocomplete-light（Django后端集成） #

这个方案更贴合Django开发流程，无需手动编写大量前端代码：

1. 安装依赖 #

pip install django-autocomplete-light

2. 配置settings.py #

在INSTALLED_APPS中添加：

INSTALLED_APPS = [
    # 放在taggit之前
    'dal',
    'dal_select2',
    # 其他应用
    'taggit',
    ...
]

3. 创建标签自动补全视图 #

在views.py中添加：

from dal import autocomplete
from taggit.models import Tag

class TagAutocomplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        # 过滤匹配搜索关键词的标签
        queryset = Tag.objects.order_by('name')
        if self.q:
            queryset = queryset.filter(name__istartswith=self.q)
        return queryset

4. 配置URL #

在项目urls.py中添加：

from django.urls import path
from .views import TagAutocomplete

urlpatterns = [
    ...
    path('tag-autocomplete/', TagAutocomplete.as_view(), name='tag-autocomplete'),
]

5. 修改forms.py #

使用dal的自动补全组件：

from django import forms
from dal import autocomplete
from taggit.forms import TagField
from .models import Question

class QuestionForm(forms.ModelForm):
    tags = TagField(
        label='标签',
        widget=autocomplete.Select2Multiple(
            url='tag-autocomplete',
            attrs={'class': 'form-control'}
        ),
        help_text='选择已有标签或输入新标签'
    )

    class Meta:
        model = Question
        fields = ['title', 'content', 'anonymous', 'tags']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control form-control-lg'}),
            'content': forms.Textarea(attrs={'class': 'form-control'}),
        }

6. 渲染表单 #

form.html中直接渲染字段即可：

<div class="form-group">
    {{ form.title.label_tag }}
    {{ form.title }}
</div>
<div class="form-group">
    {{ form.content.label_tag }}
    {{ form.content }}
</div>
<div class="form-group">
    {{ form.anonymous.label_tag }}
    {{ form.anonymous }}
</div>
<div class="form-group">
    {{ form.tags.label_tag }}
    {{ form.tags }}
</div>

两种方案都能实现带搜索的多选标签功能，方案一适合快速搭建，方案二更适合长期维护的Django项目。

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