Question

我在网页上添加了一个select2字段，我希望使用ajax将记录加载到其中。所以我宣布了一个url字段。

$(document).ready(function() {
        $("#field_id").select2({
            placeholder: "Search...",
            ajax: {
                url: '{{ url }}',
                dataType: 'json',
                ...
                templateResult: formatItem,

这个url指向一个方法，该方法应返回匹配的产品，但我不知道如何序列化它们以便它可以工作。这是我的方法：

    def get_ajax(self, request, *args, **kwargs):
        query = request.GET.get('q', None)
        if query:
            products = Product.objects.filter(name__icontains=query)
            return JsonResponse(products, safe=False)
        else:
            return JsonResponse(data={'success': False,
                                      'errors': 'No mathing items found'})

但我只得到未定义的值。我的JS formatItem（）方法如下所示：

function formatItem (item) {
    console.log(item);
    if (item.loading) return item.name || item.text;
    var markup = '<div class="clearfix">' +
    '<div class="col-sm-12">' + item.name +
    '</div>' +
    '</div>';

    return markup;
}

我做错了什么？提前谢谢。

Answer 1

您可以使用.values将结果作为dict。

def get_ajax(self, request, *args, **kwargs):
            query = request.GET.get('q', None)
            if query:
                products = Product.objects.filter(name__icontains=query).values("pk","name")
                products = list(products)
                return JsonResponse(products, safe=False)
            else:
                return JsonResponse(data={'success': False,
                                          'errors': 'No mathing items found'})

在你的js文件中

    $(document).ready(function(){
        $("#field_id").select2({
    tags: true,
    multiple: true,
    // tokenSeparators: [',', ' '],
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    ajax: {
        url: '{% url 'product:suggest_product' %}',
        dataType: "json",
        type: "GET",
        data: function (params) {

            var queryParameters = {
                q: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.product,
                        id: item.pk
                    }
                })
            };
        }
    }
});

});

Django - 使用url实现select2

1 个答案: