Django - 使用url实现select2

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

});