JQuery Autocomplete - Post Daten nach ausgewählten

Question

Ich benutze Djago + jQuery Autocomplete. Die automatische Vervollständigung funktioniert tatsächlich. Aber ich bin nicht sicher, wie man die Daten sendet, nachdem der Benutzer sie auswählt. Wenn ich es sende, kommen alle Informationen, die Autocomplete abrufen.

jQuery

$("#tags5").autocomplete({ 
    minLength:3, 
    source: function(req, add){ 
     var search=$("#tags5").val(); 
     $.ajax({ 
     url:'/ajax/', 
     async:false, 
     dataType:'json', 
     type:'GET', 
     data:{ 'start': search,}, 
     success: function(data){ 
      var suggestions=[]; 
      $.each(data, function(index, objeto){ 
      suggestions.push(objeto); 
      }); 
      add(suggestions); 
      #send data 
      $.get("/showlist", { suggestions }); 
     }, 
     error:function(err){ 
      alert("error"); 
     } 
     }); 
    } 
    }); 
}); 

HTML

<form id='tv' method="GET" action="/showlist">{% csrf_token %} 
     <label for="tags5"> </label> 
     <input id="tags5" style="width: 500px"> 
     <button class='btn btn-conf btn-green' type="submit" id="post-btn" style="width: 200px" >Adicionar</button> 
     </form> 

Django

# views.py 
def lista(request): 
    if request.is_ajax: 
     search=request.GET.get('start','') 
     tvshow=TvShowModel.objects.filter(tvs_name__icontains=search) 
     results=[] 
     for tv in tvshow: 
      tv_json={} 
      tv_json['label']=tv.tvs_name 
      tv_json['value']=tv.tvs_name 
      results.append(tv_json) 

     data_json=json.dumps(results[:5]) 

    else: 
     data_json='fail' 

    mimetype="application/json" 
    return HttpResponse(data_json,mimetype) 

def index(request): 
    return render(request, 'webapp/base.html') 

# urls.py 
    urlpatterns = [ 
      url(r'^$', views.index, name='index'), 
      url(r'^showlist', views.showlist, name='showlist'), 
      url(r'^ajax/$',views.lista), 
     ] 

Ausgang:

[06/Dec/2016 13.53.40] „GET /Liste anzeigen? Vorschläge% 5B0% 5D% 5Bvalue% 5D = Tanzen + mit + den + Sternen & Vorschläge% 5B0% 5D% 5Blabel% 5D = Tanzen + mit + den + Sternen & Vorschläge% 5B1% 5D% 5Bvalue% 5D = Tanz + Moms & Vorschläge% 5B1% 5D% 5Blabel% 5D = Tanz + Mütter & Vorschläge% 5B2% 5D% 5Bvalue% 5D = Tanzen + auf + die + Kante & Vorschläge% 5B2% 5D% 5Blabel% 5D = Tanzen + auf + das + Edge & Vorschläge% 5B3% 5D% 5Bvalue% 5D = So + Du + Denk + Du + Kann + Tanzen & Vorschläge% 5B3% 5D% 5Blabel% 5D = So + Du + Denk + Du + Kann + Tanzen & Vorschläge% 5B4% 5D% 5Bvalue% 5D = Tanz + Akademie & Vorschläge% 5B4% 5D% 5Blabel% 5D = Tanz + Akademie HTTP/1.1 "200 80211 [06/Dez/2016 13:53:45]" GET/showlist? Csrfmiddlewaretoken = VaD6qQEWFViTSV1wvI3cNWGARSqZRnxYXeB3bwWsf xyzTBQv1SJ4oN4Yqeny2fMf HTTP/1.1" 200 80211

ich soll nur die Dance Moms Optionen zum Beispiel bekommen, stattdessen ist es, alle von ihnen zu bringen.

Ich habe versucht, die Change und Selector Ereignisse zu verwenden, aber es hat auch nicht funktioniert.

Answer 1

Sie brauchen so etwas wie dies in Ihrem Autocomplete

$("#tags5").autocomplete({ 
    minLength:3, 
    source: function(req, add){ ... }, 
    select: function(event, ui) { 
       log("Selected: " + ui.item.value + " aka " + ui.item.id); 
       $.ajax({ //send selected item here }); 
    }, 
}); 

Answer 2

Können Sie umschreiben Ihre Ansicht dazu hinzuzufügen: für die automatische Vervollständigung

def lista(request): 

    mimetype="application/json" 

    if request.is_ajax: 
     search=request.GET.get('start','') 
     tvshow=TvShowModel.objects.filter(tvs_name__icontains=search) 
     results=[] 
     for tv in tvshow: 
      tv_json={} 
      tv_json['label']=tv.tvs_name 
      tv_json['value']=tv.tvs_name 
      results.append(tv_json) 

     data_json=json.dumps(results[:5]) 
     return HttpResponse(data_json,mimetype) 

    else: 
     data_json='fail' 
     return HttpResponse(data_json,mimetype) 

Beispiel von jQuery:

$("#tags5").autocomplete({ 
      source: function (request, response) { 
        $.ajax({ 
         url: "/ajax/", 
         dataType: "json", 
         data: {term: request.term}, 
         contentType: "application/json; charset=utf-8", 
         success: function (data) { 

          var results = $.map(data.search_org, function (item) { 
           if (item.sugession.toUpperCase().indexOf(request.term.toUpperCase()) === 0) 

          return { 
           sugession:item.sugession, 

          }; 

         }); 
         response(results) 

        } 

       }); 

      }, 
      minLength: 3, 
      scroll: true, 
      select: function (event, ui) { 

       var sugession = ui.item.sugession; 
       $('#tags5').val(ui.item.sugession); 

       return false; 
      } 


     }).data("ui-Autocomplete")._renderItem = function (ul, item) { 

      return $("<li>").data("item.autocomplete", item).append("<a class='index_list_autocomplete'>" + item.sugession + "</a>").appendTo(ul); 

     }; 

Answer 3

gefunden eine Lösung nach dem Lesen einiger der oben genannten Sachen:

Ich fügte den attr Namen für den Eingang:

<form id='tv' method="GET" action="/showlist">{% csrf_token %} 
     <label for="tags5"> </label> 
     <input id="tags5" style="width: 500px" **name="tvshowname"** class="subscribe-input"> 
     <button class='btn btn-conf btn-green' type="submit" id="post-btn" style="width: 220px" >Adicionar</button> 
     </form> 

Und die Folow Linie vom jquery entfernt:

$.get("/showlist", { suggestions }); 

Ausgang:

[06/Dec/2016 20 : 37: 04] "GET/showlist? Csrfmiddlewaretoken = JIWLTlNvxV2NfZj7LW2TirOFawI2bckvLMUIE1517xitgF86h6ILTic3JSFBm4zM & tvshowname = Unterbrechung + Unterbrechung HTTP/1.1" 200 66129

Keine der Post sendet nur das Ergebnis, das ich ausgewählt.

Danke für den Nachschlag!