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

Question

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

Answer 1

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

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