JQuery Autocomplete - post data after selected

Question

I using Djago + jQuery autocomplete. The auto complete is indeed working. But I am not sure how to send the data after the user select it. When I send it it comes all the info that autocomplete retrieve.

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

Output:

[06/Dec/2016 13:53:40] "GET /showlist?suggestions%5B0%5D%5Bvalue%5D=Dancing+with+the+Stars&suggestions%5B0%5D%5Blabel%5D=Dancing+with+the+Stars&suggestions%5B1%5D%5Bvalue%5D=Dance+Moms&suggestions%5B1%5D%5Blabel%5D=Dance+Moms&suggestions%5B2%5D%5Bvalue%5D=Dancing+on+the+Edge&suggestions%5B2%5D%5Blabel%5D=Dancing+on+the+Edge&suggestions%5B3%5D%5Bvalue%5D=So+You+Think+You+Can+Dance&suggestions%5B3%5D%5Blabel%5D=So+You+Think+You+Can+Dance&suggestions%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=VaD6qQEWFViTSV1wvI3cNWGARSqZRnxYXeB3bwWsfxyzTBQv1SJ4oN4Yqeny2fMf HTTP/1.1" 200 80211

I should get only the Dance Moms options for example, instead it is bring all of them.

I tried to use the change and selector events but it didn't work either.

Answer 1

Found a solution after reading some of the stuff above:

I added the attr name to the input:

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

And removed the folow line from the jquery:

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

Output:

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

No the post is only sending the result I selected.

Thanks for the helping!

Answer 2

Can you rewrite your View to this:

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)

Example of jQuery for autocomplete:

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

You need to add something like this in your 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 });
    },
});