jquery之Django:具有多个查询集的 jQuery 自动完成

我正在尝试为 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 以显示不同列中的值，就像我提供的链接中那样？

请您参考如下方法:

您需要合并两个列表并将其作为响应发送

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我认为这会有所帮助。