Django：具有多个查询集的 jQuery 自动完成

Posted 2023-02-24

【中文标题】Django：具有多个查询集的 jQuery 自动完成

【英文标题】：Django: jQuery autocomplete with multiple queryset

【发布时间】：2018-05-17 20:14:42

【问题描述】：

我正在尝试为 django 编写一个自动完成代码，它将显示多个查询集而不是单个列表，可以在此处找到具有此实现的另一个站点的示例：https://www.uala.it/

现在我能够在查询集中发送两个模型的对象：

def multi_autocomplete(request):
    if request.is_ajax():
        # In base a cosa sta scrivendo l'utente mostro un set di aziende.
        query = request.GET.get("term", "")
        companies = Company.objects.filter(name__icontains=query)
        treatments = Treatment.objects.filter(name__icontains=query)
        results = []
        for company in companies:
            place_json = company.name
            results.append(place_json)
        for treatment in treatments:
            place_json = treatment.name
            results.append(place_json)
        data = json.dumps(results)
    return HttpResponse(data, "application/json")

如您所见，我正在返回 json.dumps 以及来自两个模型的数据，如何更改 ui 以显示不同列中的值，如我提供的链接中的值？

【参考方案1】：

尝试以字典格式发送结果并在自动完成 ajax 响应处理程序中进行处理，

clist = []
tlist = []

for company in companies:
    clist.append(company.name)
for treatment in treatments:
    tlist.append(treatment)
data = json.dumps("companies":clist, "treatments":tlist)
return HttpResponse(data, "application/json")

自动完成 AJAX 处理

$("#input_autocomplete").autocomplete(
        source: function(request, response) 

            $.ajax(
                type:"GET",
                cache:false,
                data:
                    'term': request.term,
                ,
                url: "% url 'treatment-autocomplete' %",
                success:function(data) 
                    $("#input_autocomplete").removeClass('ui-autocomplete-loading');
                    $('#companyList').empty();
                    $('#treatmentList').empty();
                    $.each(data['companies'], function(i, item) 
                       $('#companyList').append(item);
                    );
                    $.each(data['treatments'], function(i, item) 
                       $('#treatmentList').append(item);
                    );
                
           );

        ,
        error: function(data) 
            $('#input_autocomplete').removeClass('ui-autocomplete-loading');  
        
         minLength: 1,
        open: function() ,
        close: function() ,
        focus: function(event,ui) ,
        select: function(event, ui) 

);

【讨论】：

“在自动完成 ajax 响应处理程序中处理相同的内容”是什么意思？你能给我看一些代码来澄清一下吗？我对 jquery 不是很好，实际上我的 html 文件中有这个： $(function() $("#input_autocomplete").autocomplete( source: "% url 'treatment-autocomplete' %", minLength : 1, ); );

你想像uala.it那样显示吗？？您在一个自动完成框中搜索并在另外两个列表中显示输出。

是的，但是，我不知道如何更改输出以将其显示在两个单独的列表中（在 jQuery 中）。

【参考方案2】：

您需要合并两个列表并在响应中发送它

from django.db.models import F

def multi_autocomplete(request):
    if request.is_ajax():
        query = request.GET.get("term", "")
        companies = Company.objects.filter(name__icontains=query).annotate(value=F('name'), label=F('name')).values('id', 'value', 'label')
        treatments = Treatment.objects.filter(name__icontains=query).annotate(value=F('name'), label=F('name')).values('id', 'value', 'label')
        results = list(companies) + list(treatments)
        data = json.dumps(results)
    else:
        data = 'fail'
    return HttpResponse(data, 'application/json')

您的自动完成处理程序将如下所示。

$("#input_element_id").autocomplete(
     source: "% url 'url name' %",
     response: function(event, ui) 
        if (!ui.content.length) 
           var noResult =  value: "", label: "No data found" ;
           ui.content.push(noResult);
         
     ,
     select: function (e, ui) 
         if (ui.item.value) 
            //do stuff after user selected option from autocomplete   
         
     
);

更新

检查此JsFiddle 我认为这会有所帮助。

【讨论】：

您提供的代码正在运行，并且与我已经实现的结果相同，即包含两个模型元素的单个列表...但是我不知道如何输出这个产生两个不同的列表。

完全正确，就像我提供的链接：www.uala.it，在该站点中，如果您尝试它们会在两个列表中显示结果：Trattamenti 和 Saloni。我不知道该怎么做这样的事情！

如何创建根据相关模型（FK 字段）过滤的列表之一？