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

尝试以字典格式发送结果并在自动完成 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) {}

});

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