在获取数据时，对 Django 项目使用 Select2 自动完成功能不起作用

Posted 2023-02-19

【中文标题】在获取数据时，对 Django 项目使用 Select2 自动完成功能不起作用

【英文标题】：Using Select2 autocomplete with Django project does not work while fetching the data

【发布时间】：2018-06-05 20:04:03

【问题描述】：

在我的 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

或

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

或

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 repo 和其他一些东西上的问题，但无法解决。

我做错了什么？

【参考方案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]

Url.py：

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

form.py：

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