JQuery Autocomplete - данные после выбранного

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> 

Джанго

# 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/Декабрь/2016 13:53:40] «GET/showlist? предложения% 5B0% 5D% 5Bvalue% 5D = Танцы + с + + Звезды & предложения% 5B0% 5D% 5Blabel% 5D = Танцы + с + + Звезды & предложения% 5B1% 5D% 5Bvalue% 5D = Dance + Moms & предложения% 5B1% 5D% 5Blabel% 5D = Dance + Moms & предложения% 5B2% 5D% 5Bvalue% 5D = Танцы + на + + Edge & предложения% 5B2% 5D% 5Blabel% 5D = Танцы + на + Edge & предложения% 5B3% 5D% 5Bvalue% 5D = So + You + Think + You + Can + Dance & предложения% 5B3% 5D% 5Blabel% 5D = So + You + Think + You + Can + Dance & предложений% 5B4% 5D% 5Bvalue% 5D = Dance + Academy & Предложения% 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

Вы можете переписать ваш взгляд на это:

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) 

Пример 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

Найдено решение после прочтения некоторых из приведенных выше материалов:

Я добавил имя атр к входу:

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

И удалили Folow строку из JQuery:

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

Выход:

[06/Декабрь/2016 20 : 37: 04] «GET/showlist? Csrfmiddlewaretoken = JIWLTlNvxV2NfZj7LW2TirOFawI2bckvLMUIE1517xitgF86h6ILTic3JSFBm4zM & tvshowname = Prison + Break HTTP/1.1" 200 66129

Нет пост только отправка результата, который я выбрал.

Спасибо за порцию!