使用django-taggit在Django Admin中实现全标签选择框的方法

你当前使用的TagWidget仅支持手动输入标签，没有提供下拉选择已有标签的功能。要实现手动输入新标签+选择所有可用标签的需求，可通过以下两种方式解决：

方法一：使用taggit自带的TaggitSelect2Widget（推荐） #

这个widget集成了select2组件，天然支持输入搜索+下拉选择已有标签，步骤如下：

1. 先安装依赖包（如果没装的话）：

pip install django-select2

2. 修改admin代码：

from django.contrib import admin
from django.db import models
from taggit.forms import TaggitSelect2Widget  # 替换原来的TagWidget
from .models import Post, Comment

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    fields = ('title', 'slug', 'author', 'body', 'publish', 'status', 'tags')
    list_filter = ('status', 'created', 'publish', 'author')
    list_display = ('title', 'slug', 'author', 'publish', 'status', 'get_tags')
    prepopulated_fields = {'slug': ('title',)}
    raw_id_fields = ('author',)
    formfield_overrides = {
        models.ManyToManyField: {'widget': TaggitSelect2Widget},  # 替换为支持选择的widget
     }

    def get_tags(self, obj):
        return ", ".join(o for o in obj.tags.names())

3. 在项目的settings.py中添加django_select2到INSTALLED_APPS：

INSTALLED_APPS = [
    # ... 其他已存在的应用
    'django_select2',
]

配置完成后，标签字段会变成带搜索功能的下拉框：既可以手动输入新标签回车添加，也能点击下拉箭头选择系统中所有已有标签，还能通过输入关键词快速过滤标签。

方法二：自定义结合原生多选框的Widget（无需额外依赖） #

如果不想引入第三方包，也可以自定义widget，同时保留输入框和原生多选框：

from django.contrib import admin
from django.db import models
from taggit.forms import TagWidget
from django.forms import widgets
from django.utils.safestring import mark_safe

class TagSelectWidget(widgets.MultiWidget):
    def __init__(self, attrs=None):
        _widgets = [
            TagWidget(attrs={'placeholder': '输入新标签，逗号分隔'}),
            widgets.SelectMultiple(attrs={'size': 8})
        ]
        super().__init__(_widgets, attrs)

    def decompress(self, value):
        if value:
            return [", ".join(value.names()), value.values_list('id', flat=True)]
        return ["", []]

    def render(self, name, value, attrs=None, renderer=None):
        html = super().render(name, value, attrs, renderer)
        return mark_safe(f"""
        <div style="display:flex; gap:15px;">
            <div style="flex:1;">{html.split('<div')[0]}</div>
            <div style="flex:1;">
                <label>选择已有标签</label>
                {''.join('<div>'+part+'</div>' for part in html.split('<div')[1:])}
            </div>
        </div>
        """)

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    # ... 其他配置保持不变
    formfield_overrides = {
        models.ManyToManyField: {'widget': TagSelectWidget},
     }

这个方法会生成两个操作区域：左边是手动输入标签的输入框，右边是所有已有标签的多选框，用户可以同时使用两种方式添加标签。

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