ジャンゴ：複数のクエリセットでjQueryのオートコンプリート

Question

私が代わりに単一のリストの複数のクエリセットを表示していましたジャンゴのためのオートコンプリートをコード化しようとしています、この実装を持っている別のサイトの例としては、ここで見つけることができます：今https://www.uala.it/

あなたは、私が表示するようにUIを変更することができますどのように、私は2つのモデルからのデータでjson.dumpsを返すよ見ることができるように

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

：私は、クエリセットに2つのモデルのオブジェクトを送信することができましたリンクのような異なる列の値は私が提供した？

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 
     } 
    } 
}); 

更新

私はこれが役立つと思います。この​​をチェックしてください。

Answer 2

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

を取り扱うオートコンプリート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応答ハンドラでそれを処理するようにしてみてください）。