数百項目のdjangoフォームフィールドの選択を変更すると、フリーズ/非応答が発生する

Question

djangoフォームのフィールドの選択肢を動的に変更したい。 アイテムのリストはかなり長いので（650アイテム以上）、私はそれらをdjangoキャッシュに保存します。

ただし、フィールドの選択肢として注入する場合、アプリケーションが応答しなくなります（ERR_EMPTYRESPONSEを返すこともあります）。

マイビュー：

class HomeView(TemplateView): 
    template_name = 'web/pages/homepage.html' 

    def get_context_data(self, **kwargs): 
     context = super().get_context_data(**kwargs) 
     categories = cache.get_or_set('categories_list', Category.objects.values('uuid', 'code', 'name'), 3600) 
     categories_choices = [(o['uuid'], '{} ({})'.format(o['name'], o['code'])) for o in categories] 
     print(categories_choices) #its printing proper choices here 
     context['form'] = SearchForm() 
     context['form'].fields['category'].choices = categories_choices #this line causes freeze/timeout 

     return context 

が何が起こっているか任意のアイデア？おそらく、ドロップダウンの選択肢として600以上のアイテムが多すぎますか？

Answer 1

これをajaxで使用するのに最適な方法です。それ以外の場合は、ブラウザの読み込みに問題があります。あなたはajaxでこれを行うことができます。

forms.py

class ProductForm(forms.ModelForm): 

    def __init__(self, *args, **kwargs): 
     super(ProductForm, self).__init__(*args, **kwargs) 
     self.fields['category'].queryset = Category.objects.none() 

要求されたカテゴリ

from django.http import JsonResponse 

def suggest_category(request): 
    category = request.GET.get("category") 
    category = [{"data":"nothing found"}] 
    if category: 
     category = Category.objects.filter(category__icontains= 
              category).values("uuid", "category") 
     category = list(category) 
    return JsonResponse(category, safe=False) 

の辞書を返すように関数を記述し、あなたのHTMLテンプレートは、このスクリプトを

</script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

<script> 
    $(document).ready(function(){ 
     $("select[name='category']").select2({ 
    // tags: true, 
    // multiple: true, 
    // tokenSeparators: [',', ' '], 
    minimumInputLength: 2, 
    minimumResultsForSearch: 10, 
    ajax: { 
     url: '{% url 'product:suggest_category' %}', 
     dataType: "json", 
     type: "GET", 
     data: function (params) { 

      var queryParameters = { 
       category: params.term 
      } 
      return queryParameters; 
     }, 
     processResults: function (data) { 
      return { 
       results: $.map(data, function (item) { 
        return { 
         text: item.category, 
         id: item.uuid 
        } 
       }) 
      }; 
     } 
    } 
}); 

}); 

を追加