Django Admin非外键字段City的自动完成筛选实现问题

你用django-admin-autocomplete-filter没成功，核心原因是这个工具主要针对外键/多对多字段设计，而你的city是普通CharField。下面给两种可行方案：

方案一：将City转为关联模型（推荐） #

把City抽成独立模型，既符合数据库设计规范，也能直接用目标工具实现自动完成：

1. 创建City模型

from django.db import models

class City(models.Model):
    name = models.CharField(max_length=200, unique=True)

    def __str__(self):
        return self.name

2. 修改Person模型的city字段

class Person(models.Model):
    first_name = models.CharField(max_length=50, null=True, blank=True)
    last_name = models.CharField(max_length=50, null=True, blank=True)
    age = models.PositiveIntegerField(null=True, blank=True)
    gender = models.CharField(choices=Gender.choices, null=True, blank=True)
    # 替换原CharField为外键
    city = models.ForeignKey(City, on_delete=models.SET_NULL, null=True, blank=True)

3. 配置Admin后台

• 先注册City模型，开启搜索支持：

from django.contrib import admin
from .models import City, Person
from django_admin_autocomplete_filter.admin import AutocompleteFilterMixin

@admin.register(City)
class CityAdmin(admin.ModelAdmin):
    search_fields = ['name']  # 用于自动完成搜索的匹配字段
    list_display = ['name']

# 定义城市自动完成筛选器
class CityFilter(AutocompleteFilterMixin, admin.SimpleListFilter):
    title = '城市'
    parameter_name = 'city'
    # 替换appname为你的应用名称
    autocomplete_url = 'admin:appname_city_autocomplete'

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    list_filter = [CityFilter]
    autocomplete_fields = ['city']  # 表单中的城市选择框也开启自动完成

方案二：保留CharField实现自动完成筛选 #

如果不想调整模型结构，需要自定义筛选逻辑和前端自动完成：

1. 创建自动完成数据接口

from django.http import JsonResponse
from django.views.generic import View
from .models import Person

class CityAutocompleteView(View):
    def get(self, request):
        query = request.GET.get('term', '')
        # 从Person表中提取不重复的城市名称
        cities = Person.objects.filter(city__icontains=query).values_list('city', flat=True).distinct()
        cities = [city for city in cities if city]  # 过滤空值
        return JsonResponse(list(cities), safe=False)

2. 配置路由
   在应用的urls.py中添加接口路由：

from django.urls import path
from .views import CityAutocompleteView

urlpatterns = [
    # 其他路由...
    path('city-autocomplete/', CityAutocompleteView.as_view(), name='city-autocomplete'),
]

3. 自定义Admin筛选器

from django.contrib import admin
from django import forms
from .models import Person

# 带自动完成的筛选表单
class CityAutocompleteForm(forms.Form):
    city = forms.CharField(
        required=False,
        widget=forms.TextInput(attrs={
            'class': 'city-autocomplete',
            # 替换为你实际的接口URL
            'data-url': '/your-app-path/city-autocomplete/',
        })
    )

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    def changelist_view(self, request, extra_context=None):
        # 加载筛选表单
        self.form = CityAutocompleteForm(request.GET)
        extra_context = extra_context or {'form': self.form}
        return super().changelist_view(request, extra_context)

    def get_queryset(self, request):
        qs = super().get_queryset(request)
        # 应用城市筛选条件
        city_query = request.GET.get('city')
        if city_query:
            qs = qs.filter(city__icontains=city_query)
        return qs

    # 引入前端自动完成依赖
    class Media:
        js = (
            'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js',
            '/static/js/city-autocomplete.js',
        )
        css = {
            'all': ('https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css',)
        }

4. 编写前端自动完成初始化脚本
   在/static/js/city-autocomplete.js中添加：

jQuery(document).ready(function($) {
    $('.city-autocomplete').autocomplete({
        source: $(this).data('url'),
        minLength: 2, // 输入2个字符后触发搜索
    });
});

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