Django：在HTML中搜索具有多個輸入字段（帶下拉菜單）的Django模型的多個字段

Question

如何在Django中實現下拉搜索，用戶可以在其中搜索二手車列表。 HTML搜索頁面將有3個下拉菜單，分別是品牌，顏色，年份。 一旦用戶選擇了品牌，顏色和年份，列表將返回符合該要求的汽車列表。

class SecondHandCar(models.Model):
    brand = models.CharField(max_length=250, unique=True)
    slug = models.SlugField(max_length=250, unique=True)
    description = models.TextField(blank=True)
    colour = models.CharField(Category, on_delete=models.CASCADE)
    year = models.IntegerField(blank=False)

對於任何需要做的想法，我將不勝感激。 我看過Q查詢，django haystack，但是我不確定哪一個適合我的需求。 我想我很高興看到如何將其與事物的HTML方面集成在一起，以將查詢從多個輸入字段傳遞給Django。

Answer 1

您可以使用新的端點執行此操作，在該端點可以根據所需的過濾器搜索汽車。 我不知道您是否希望將它們全部組合在一起以選擇汽車，或者其中之一要滿足，因此我已經提到了兩者。

解決方案 ：

url(r'^search_cars/$'. views.search_cars, name='search-cars')

def search_cars(request, *args, **kwargs):
    content_type = 'application/json'

    # I think you only need ajax, but you can choose to remove this
    if request.is_ajax():
        brand = request.GET.get('brand')
        colour = request.GET.get('colour')
        year = request.GET.get('year')

        # checking if all 3 are present
        if brand is None or color is None or year is None:
            return HttpResponse({
                'success': False,
                'message': 'Required fields are missing.'
            }, content_type=content_type)

        # depending on how you want to filter
        # this will choose cars which have either brand, colour or year
        filters = Q(Q(brand=brand) | Q(color=colour) | Q(year=year))
        second_hand_cars = SecondHandCars.objects.filter(filters)

        # or
        # you can choose cars which satisfy all three of these together
        filters = {'brand': brand, 'colour': colour, 'year': year}
        second_hand_cars = SecondHandCars.objects.filter(**filters)

        # serialize the objects and return the json response
        data = []
        for car in second_hand_cars:
            data.append({
                'brand': car.brand,
                'colour': car.colour,
                'year': car.year,
                'description': car.description,
                'slug': car.slug
            })

        return HttpResponse({
            'success': True,
            'data': data,
        }, content_type=content_type)
    else:
        return HttpResponse({
            'success': False,
            'message': 'Only AJAX method is allowed.'
        }, content_type=content_type)

// JavaScript code to make an ajax request
// when all three dropdowns are selected with appropriate values.
// assuming you are using jQuery.

// add a common class to all 3 dropdowns to monitor changes
$(document).on('change', '.filter-dropdown', function() {
    # all three will provide attribute `value` of `option` tag.
    var brand = $('#brandDropdown').children('option:selected').val();
    var colour = $('#colourDropdown').children('option:selected').val();
    var year = $('#yearDropdown').children('option:selected').val();

    # add a default selected `option` tag with value `""`
    if (brand !== "" && colour !== "" && year !== "") {
        var data = {
            'brand': brand,
            'colour': colour,
            'year': year
        }

        $.ajax({
            url: '/search_cars/',
            type: 'GET',
            data: data,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // render cars from `response.data`
                } else {
                    // show message from `response.message`
                }
            },
            error: function(errorResponse) {
                // show error message
            }
        });
    } else {
        return;
    }
});

參考 ：
* AJAX文件
* 如何在沒有jQuery的情況下發出AJAX請求
* Django中的Q查詢