Django - URLを使ったselect2の実装

Question

私のWebページに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 
        } 
       }) 
      }; 
     } 
    } 
}); 

});