Django: <a href="https://www.uala.it/" rel="nofollow noreferrer">https://www.uala.it/</a></p> <p>Jetzt: jQuery Autocomplete mit mehreren queryset

Question

Ich versuche, eine der automatischen Vervollständigung für django zu codieren, die mehrere queryset anstelle einer einzigen Liste angezeigt werden sollen, ein Beispiel einer anderen Website, die diese Implementierung haben können hier gefunden werden ich konnte die Objekte von zwei Modellen in einem queryset senden:

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") 

wie Sie sehen, ich bin die json.dumps mit den Daten aus den beiden Modellen zurückkehren, wie kann ich den ui ändere die zeigen, Werte in verschiedenen Spalten wie in dem Link ich zur Verfügung gestellt?

Answer 1

Sie müssen sowohl die Liste verschmelzen und es in Reaktion

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') 

Ihre Autocomplete-Handler aussehen wird, senden.

$("#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 
     } 
    } 
}); 

aktualisieren

prüfen diese JsFiddle Ich denke, das wird helfen.

Answer 2

Versuchen Sie das Ergebnis im Wörterbuch Format und behandeln Sie das gleiche in der automatischen Vervollständigung Ajax-Antwort-Handler zu senden,

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") 

automatische Vervollständigung AJAX Handling

$("#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) {} 

});