장고 : 복수의 검색어와 jQuery를 자동 완성은

Question

내가 대신 하나의 목록으로이 구현이 다른 사이트의 예를 다수의 검색어를 표시 할 장고에 대한 자동 완성을 코딩하는 것을 시도하고 여기에서 찾을 수 있습니다 : 이제 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") 

당신은 내가 어떻게이 보여 UI를 변경할 수 있습니다, 두 모델의 데이터와 json.dumps를 반환하고 있습니다 볼 수 있듯이 내가 제공 한 링크와 같은 다른 열의 값은 무엇입니까? 사전 처리 포맷으로 결과를 전송하고 자동 완성 Ajax 응답 처리기이를 처리하기

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.

Answer 2

시도

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

});