如何在Django中使用django-taggit实现标签多选功能？

针对你的需求，下面提供两种实用的实现方式，适配不同场景：

方法1：复选框选择已有标签 #

适合需要用户从现有标签库中选择的场景，操作直观。

修改你的forms.py代码如下：

from django import forms
from taggit.models import Tag
from .models import BlogPost

class BlogPostForm(forms.ModelForm):
    # 自定义tags字段，用复选框展示所有已创建的标签
    tags = forms.ModelMultipleChoiceField(
        queryset=Tag.objects.all(),
        widget=forms.CheckboxSelectMultiple,
        required=False  # 允许不选标签
    )

    class Meta:
        model = BlogPost
        fields = ("title", "body", "tags")
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Title'}),
            # 注意：RichTextField对应表单应该用Textarea或富文本编辑器组件，原代码的TextInput不合适，这里修正
            'body': forms.Textarea(attrs={'class': 'form-control'}),
        }

    # 重写save方法，处理标签与文章的关联
    def save(self, commit=True):
        instance = super().save(commit=False)
        if commit:
            instance.save()
            # 先清除原有标签，再添加选中的新标签
            instance.tags.clear()
            for tag in self.cleaned_data['tags']:
                instance.tags.add(tag)
        return instance

方法2：可输入+搜索的多选标签（推荐） #

支持用户输入新标签、搜索选择已有标签，体验更友好，符合大多数博客场景。

步骤1：修改forms.py #

from django import forms
from taggit.forms import TagWidget
from .models import BlogPost

class BlogPostForm(forms.ModelForm):
    class Meta:
        model = BlogPost
        fields = ("title", "body", "tags")
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'Title'}),
            'body': forms.Textarea(attrs={'class': 'form-control'}),
            # 使用taggit自带的TagWidget，并添加自定义类用于前端渲染
            'tags': TagWidget(attrs={'class': 'form-control select2-tags'}),
        }

步骤2：前端添加多选组件支持 #

在渲染表单的模板文件中，添加Select2的静态资源（建议下载到本地项目，避免外链依赖）和初始化代码：

<!-- 加载本地的Select2样式和脚本 -->
<link rel="stylesheet" href="{% static 'select2/css/select2.min.css' %}">
<script src="{% static 'select2/js/select2.min.js' %}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 初始化多选标签组件
    document.querySelectorAll('.select2-tags').forEach(el => {
        $(el).select2({
            tags: true,  // 允许输入新标签
            tokenSeparators: [',', ' ']  // 设置标签分隔符
        });
    });
});
</script>

注意事项 #

• 原代码中body字段使用TextInput是错误的，因为RichTextField是多行富文本，应替换为Textarea或对应富文本编辑器的widget（比如django-ckeditor的CKEditorWidget）。
• 若使用方法2，需要确保项目已配置静态文件服务，将Select2的资源放在static目录下。

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