JQuery自動完成 - 選定後發佈數據

Question

我使用Djago + jQuery自動完成。自動完成確實工作。但我不確定如何在用戶選擇後發送數據。當我發送它時，它會顯示自動完成檢索的所有信息。

的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), 
     ] 

輸出：

[06/DEC/2016十三時53分40秒]「GET/showlist？建議％5B0％5D％5Bvalue％5D =跳舞+帶+ the +明星&建議％5B0％5D％5B標籤％5D =跳舞+帶+ +明星&建議％5B1％5D％5B值5D = 舞蹈+媽媽&建議％5B1％5D％5Blabel％5D =舞+媽媽&建議％5B2％5D％5Bvalue％5D =跳舞+在+邊緣&建議％5B2％5D +％5Blabel上+％5D =舞+在+邊緣&建議％5B3％5D％5Bvalue％5D = So +你+ Think +你+ Can +舞蹈&建議％5B3％5D％5B標籤％5D = So +你+ Think +你+ Can +舞蹈&建議％5B4％ 5D％5Bvalue％5D = Dance + Academy & suggestions％5B4％5D％5Blabel％5D = Dance + Academy HTTP/1.1「200 80211 [06/Dec/2016 13:53:45]」GET/showlist？csrfmiddlewaretoken = VaD6qQEWFViTSV1wvI3cNWGARSqZRnxYXeB3bwWsf xyzTBQv1SJ4oN4Yqeny2fMf HTTP/1.1「200 80211

我應該只拿到舞蹈媽媽的選擇，例如，而不是它帶來的所有。

我試圖使用更改和選擇器事件，但它也沒有工作。

Answer 1

您需要添加這樣的事情在你的自動完成

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

你可以重寫你瀏覽到這一點：jQuery的的

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) 

舉例自動完成：

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

找到閱讀上面的一些東西后的解決方案：

我添加ATTR名稱到輸入：

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

併除去從jQuery的便接踵而來行：

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

輸出：

[06/DEC/2016 20 ：37：04]「GET/showlist？csrfmiddlewaretoken = JIWLTlNvxV2NfZj7LW2TirOFawI2bckvLMUIE1517xitgF86h6ILTic3JSFBm4zM & tvshowname =監獄+休息HTTP/1。1" 200 66129

否後只發送我選擇的結果。

感謝的幫助！