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

});