select2 ajax показывает результаты, но не может выбрать

Question

Я использую плагин select2 с удаленными данными ajax. Я вижу результаты в раскрывающемся списке, но не могу их выбрать. Я хочу, чтобы результаты были выбраны и помещены в поле после выбора. Я думаю, что проблема заключается в передаче идентификатора, я не знаю, как правильно его передать .. Любые идеи?

мой JSON для tag_word = для ... нет никаких документов

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

Вот код:

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

здесь код сервера:

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 1

Его быстрый взлом. Не знаете, как вы могли бы согласиться с select2 documentaion. Но следующий код работал со мной в моем 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 
      }) 

    }); 
} 

Answer 2

Его потому что вы получили нужный идентификатор. изменить на цифры. Нажмите кнопку «Получить выбранный», чтобы увидеть, что идентификаторы будут переданы только.

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; 

$(document).ready(function(){ 

    $('.js-data-example-ajax').select2({ 
    minimumInputLength: 2, 
    multiple:true, 
    delay: 250, 
    data: data 


    }); 
}); 

$(".checkoutput").click(function(){ 
console.log($('.js-data-example-ajax').val()); 
}) 

Вот JSFIDDLE

Answer 3

Далее на ваш последний вопрос на ответ Alaksandar, попробуйте добавлять свой код так:

$('.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 }; }, 
     success: function(results){ 
      for(var i = 0; i < results.length; i++){ 
       results[i] = {id:i,text:results[i].text} 
      } 
     } 
    }, 
}); 

Я не тестировал все это. Итак, если это сработает, ответьте на ответ Александара как правильный, а не тот.

Answer 4

Для выбора варианта каждый результат должен иметь уникальный идентификатор. Поэтому вы можете добавить идентификатор, используя следующий код (processResults).

$('.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 }; }, 
     processResults: function (data) { 
        data.results.forEach(function (entry, index) { 
         entry.id = ''+index; // Better if you can assign a unique value for every entry, something like UUID 
        }); 

        return data; 
       }, 
       cache: true 
    }, 
});