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

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

现在，我能够在queryset中发送两个模型的对象：

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