ajax - 在获取数据时，将 Select2 自动完成与 Django 项目一起使用不起作用

Question

在我的 Django 项目中，我有一个搜索字段。我用 Select2 自动完成它。我需要从我的 Product 模型中获取 product_list。因此，我创建了一个 rest API，它以 json 格式返回产品。

这是我的休息 API 代码:

serializer.py:

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = ProductList
        fields = ('product_id', 'product_name', 'product_image', 'product_available',
                  'product_description')

views.py:

class JSONResponse(HttpResponse):
    def __init__(self, data, **kwargs):
        content = JSONRenderer().render(data)
        kwargs['content_type'] = 'application/json'
        super(JSONResponse, self).__init__(content, **kwargs)


def list(request):
    if request.method == 'GET':
        products = ProductList.objects.filter(product_name__icontains=request.GET.get('q'))
        serializer = ProductSerializer(products, many=True)
        serializer_data = serializer.data
        customData = {'results': serializer_data}
        return JSONResponse(customData)

现在在我的 html 中，在 javascript 部分我使用了 this Select2 doc 中提到的这段代码.我使用的代码如下所示:

base.html:

<script type="text/javascript">
        $(document).ready(function() {
            $('.js-data-example-ajax').select2({
                ajax: {
                    url: "/api.alif-marine.com/search/products",
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        return{
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;

                        return {
                            results: data.results,
                        };
                    },
                    cache: true
                },
                placeholder: 'Search for a product',
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatRepo,
                templateSelection: formatRepoSelection
            });
            function formatRepo (repo) {
                if (repo.loading) {
                    return repo.text;
                }

                var markup = "<div class='select2-result-repository clearfix'>" +
{#                    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +#}
                    "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" + repo.product_name + "</div>";

                if (repo.product_description) {
                    markup += "<div class='select2-result-repository__description'>" + repo.product_description + "</div>";
                }

                return markup;
            }

            function formatRepoSelection (repo) {
                return repo.product_name || repo.text;
            }
        });
    </script>

当我使用 Postman 检查其余 API 是否工作时，它工作得很好。对于我在 Postman 中的查询，如下所示:

localhost:8000/api.alif-marine.com/search/products?q=t

or

localhost:8000/api.alif-marine.com/search/products?q=tho

or

localhost:8000/api.alif-marine.com/search/products?q=thomas

检索到的 json 数据如下，用于查询 localhost:8000/api.alif-marine.com/search/products?q=t :

{  
   "results":[  
      {  
         "product_id":9,
         "product_name":"thomas",
         "product_image":"/media/media/tom_dushtu.jpg",
         "product_available":"available",
         "product_description":"jah dushtu"
      },
      {  
         "product_id":8,
         "product_name":"ami dissapointed",
         "product_image":"/media/media/dissapointment.jpg",
         "product_available":"available",
         "product_description":"I ma kinda dissapointed, you know.................."
      }
   ]
}

现在有了所有这些，我无法让它发挥作用。自动完成功能不起作用。当我按下一个键或写下整个产品的名称时，没有任何显示。

.它始终显示 Searching...。我尝试阅读 Github 存储库上的问题和其他一些内容，但无法解决。

我做错了什么？

Answer 1

这是 select2 库的处理方式:

views.py:

 class BurdenTypeAutocomplete(autocomplete.Select2QuerySetView):
     def get_result_label(self, obj):           
        return format_html(" {} / {}", obj.arabic_name,obj.englsh_name)
     def get_queryset(self):
        qs = BurdenTypeSales.objects.filter(effect_type="2")

        if self.q:
           qs = qs.filter(
               Q(arabic_name__icontains=self.q)
             | Q(account__number__icontains=self.q)
             | Q(englsh_name__icontains=self.q)
         )
        return qs[:10]

网址.py:

url(r'^burden_type_autocomplete/$',views.BurdenTypeAutocomplete.as_view(),name='burden_type_autocomplete'),

表单.py:

burden_type_sales = forms.ModelChoiceField(queryset=BurdenTypeSales.objects.filter(effect_type='2'),
        widget=autocomplete.ModelSelect2(url='burden_type_autocomplete',attrs={'required':'required'}))