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

Question

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

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

Мой json для ?tag_word=для ...нет никакого id

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

679 4

jQuery javascript json ajax jquery-select2

4 ответов:

Comments

Ничего не найдено.

Alaksandar Jesus Gene · Accepted Answer · 2015-07-27 10:39:51

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

    });
}

tk_ · Accepted Answer · 2016-08-16 19:50:50

Для выбора опции каждый результат должен иметь уникальный идентификатор. Поэтому вы можете добавить id, используя следующий код (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
    },
});

Alaksandar Jesus Gene · Accepted Answer · 2015-07-25 00:22:33

Это потому, что у вас есть все идентификаторы null. переключитесь на цифры. Нажмите на кнопку get selected, чтобы увидеть, что будут переданы только идентификаторы.
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

gibberish · Accepted Answer · 2015-07-26 23:02:40

В дополнение к вашему последнему вопросу об ответе Алаксандара, попробуйте добавить его код следующим образом:
$('.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}
            }
        }
    },
});
Я не проверял ничего из этого. Так что, если это сработает, пожалуйста, примите ответ Александра как правильный, а не этот.