如何为Django Filter关联下拉筛选字段添加manufacture、model占位符

问题描述 #

我实现了一个Django Filter关联下拉筛选功能，用于筛选汽车品牌（manufacture）和车型（model），相关字段使用CharField，汽车数据从数据库条目拉取。

我想要在两个对应字段的占位符位置分别显示manufacture和model提示文本。
我在网上找不到适配的实现方案，仅找到的相关方案是针对模型ChoiceField的，不适用于我的场景。

相关代码 #

Filter代码

class CarFilterForm(forms.Form):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['model'].queryset = Post.objects.none()
        if 'model_manufacture_id' in self.data:
            try:
                model_manufacture_id = int(self.data.get('model_manufacture_id'))
                self.fields['model_id'].queryset = CarModels.objects.filter(model_manufacture_id=model_manufacture_id)

            except (ValueError, TypeError):
                pass
        
class carFilter(django_filters.FilterSet):

    class Meta: 
        model = Post
        fields = 'manufacture', 'model'
        form = CarFilterForm

HTML模板代码

<form method="get" id="AllCarsForm" data-cars-url="{% url 'ajax-allcars' %}">
{% render_field myFilter.form.manufacture class="cars-filter-widget" %}
{% render_field myFilter.form.model class="cars-filter-widget" %}
<button class="btn btn-primary" type="submit">Search</button>
</form>

模型代码

class Manufactures(models.Model):
    manufacture_id = models.AutoField(primary_key=True)
    manufacture = models.CharField(max_length=55, default="OEM")


class CarModels(models.Model):
    model_id = models.AutoField(primary_key=True)
    model = models.CharField(max_length=55)
    model_manufacture = models.ForeignKey(Manufactures, on_delete=models.CASCADE)

解决方案 #

你可以通过修改下拉字段的empty_label属性实现占位文本效果，两种可选方案如下：

方案1：在Form初始化方法中设置 #

class CarFilterForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 设置品牌下拉占位文本
        self.fields['manufacture'].empty_label = "manufacture"
        # 设置车型下拉占位文本
        self.fields['model'].empty_label = "model"
        
        self.fields['model'].queryset = Post.objects.none()
        if 'model_manufacture_id' in self.data:
            try:
                model_manufacture_id = int(self.data.get('model_manufacture_id'))
                self.fields['model_id'].queryset = CarModels.objects.filter(model_manufacture_id=model_manufacture_id)
            except (ValueError, TypeError):
                pass

方案2：直接在模板渲染时指定 #

如果你使用的是django-widget-tweaks的render_field标签，可以直接在模板中传递参数：

<form method="get" id="AllCarsForm" data-cars-url="{% url 'ajax-allcars' %}">
{% render_field myFilter.form.manufacture class="cars-filter-widget" empty_label="manufacture" %}
{% render_field myFilter.form.model class="cars-filter-widget" empty_label="model" %}
<button class="btn btn-primary" type="submit">Search</button>
</form>

如果需要让占位文本不可选，可额外给字段添加必填属性：

self.fields['manufacture'].widget.attrs['required'] = True
self.fields['model'].widget.attrs['required'] = True

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