jquery - Django - select2 与 url 的实现

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 将结果作为字典获取。

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
                    }
                })
            };
        }
    }
});

});