[Fixed]-JQuery Autocomplete – post data after selected

1πŸ‘

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

        };
πŸ‘€Marin

0πŸ‘

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 });
    },
});
πŸ‘€renno

0πŸ‘

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!

Leave a comment