Torostar Torostar - 1 year ago 57
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>

<link href="//" rel="stylesheet" />
<script type="text/javascript" src="{% static 'js/select2.js' %}"></script>
<script >
minimumInputLength: 2,
delay: 250,
cache: true,
ajax: {
url: '/tags/search/autocomplete/',
dataType: 'json',
data: function (parms, page) { return { tag_word: parms.term }; },

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 Source

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

         $.get("json/select.json",function(data){ //specify your url for json call inside the quotes.
             for(var i = 0; i < data.length; i++){
                    minimumInputLength: 2,
                    delay: 250,
                    data: data