Torostar Torostar - 3 months ago 18
Javascript Question

select2 ajax shows results but can't select

I'm using select2 plugin with remote ajax data. I can see the results in the dropdown but can't select them. I want the results to be selectable and placed into the field after selection. I think the problem is with passing the id, I don't know how to pass it correctly.. Any ideas?

my json for ?tag_word=for ...there is no id

results: [{text: "fort"}, {text: "food"}]


Here the code:

<select class="js-data-example-ajax" style="width:100%">
<option selected="selected">asdasd</option>
</select>

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="{% static 'js/select2.js' %}"></script>
<script >
$(document).ready(function(){
$('.js-data-example-ajax').select2({
minimumInputLength: 2,
multiple:true,
delay: 250,
cache: true,
ajax: {
url: '/tags/search/autocomplete/',
dataType: 'json',
data: function (parms, page) { return { tag_word: parms.term }; },
},
});
});
</script>


here is the server code:

def autocomplete(request):
s = SearchQuerySet(using='autocomplete')
sqs = s.autocomplete(content_auto=request.GET.get('tag_word'))[:5]
suggestions = [ {'text':result.tag_word,
'id':result.tag_word,} for result in sqs]
the_data = json.dumps({
'results': suggestions
})
return HttpResponse(the_data, content_type='application/json')

Answer

Its a quick hack. Not sure how you could get along with select2 documentaion. But the following code worked with me in my localhost.

$(document).ready(function(){
         $.get("json/select.json",function(data){ //specify your url for json call inside the quotes.
             for(var i = 0; i < data.length; i++){
                 data[i]={id:i,text:data[i].text}
             }
            $(".js-data-example-ajax").select2({
                    minimumInputLength: 2,
                    multiple:true,
                    delay: 250,
                    data: data   
            })

    });
}
Comments