Django - 使用 url 实现 select2

Posted 2023-05-07

【中文标题】Django - 使用 url 实现 select2

【英文标题】：Django - implementation of select2 with url

【发布时间】：2017-09-20 02:48:07

【问题描述】：

我在我的网页中添加了一个 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;

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

【参考方案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
                    
                )
            ;
        
    
);

);