Как добавить новую опцию для тега select в select2 - удаленные данные

Я реализовал приложение, в одной из форм есть много данных в выпадающем поле, требуется некоторое время для загрузки этой страницы, поэтому я хочу загрузить ее в ajax вызове, но при возврате данных не создается новый тег option и не добавляется к тегу select, вот что я пытался

я пробовал все эти коды, но ни один из них не сработал! 

    $(document).ready(function () {
        $('#guestinfo').select2({
            ajax: {
                url: '{% url "booking:return_ajax_guests" %}',
                dataType: 'json',
                processResults: function (data) {
                    console.log(data.length)
                    if(data.length > 0){
                        for(i=0;i <= data.length;i++){
                            //var options = data[i].full_name
                            //console.log(options)
                            //$('#guestinfo').append("<option value='"+options+"'>"+options+"</option>")
                            //$('#guestinfo').trigger('change'); 

                            //var opts = new Option("option text", "value");
                            //$(o).html("option text");
                            //$("#guestinfo").append(o);                            
                            $('#guestinfo').append($('<option>', { 
                                value: options,
                                text : options 
                            }));                            
                        }
                    }
                    //return {
                    //    results: $.map(data, function (item) {
                    //        $('#guestinfo').append("<option value='"+item.full_name+"' selected>"+item.full_name+"</option>")
                    //        $('#guestinfo').trigger('change'); 
                    //        return {full_name: item.full_name, city: item.city__name};
                    //    })
                        //console.log(results)
                    //};
                }
            },
            minimumInputLength: 0
        });

    })
                            <div class="col-span-5 groupinput relative bglightpurple mt-2 rounded-xl">
                                <label class="text-white absolute top-1 mt-1 mr-2 text-xs">{% trans "full names" %}</label>
                                <select name="guestinfo" id="guestinfo" class="visitors w-full pr-2 pt-6 pb-1 bg-transparent focus:outline-none text-white">
                                    <option value="------">---------</option>
                                </select>
                            </div>

версия select2 : 2.0.7 и вот мой код на стороне сервера (django)

@login_required
def return_ajax_guests(request):
    if request.is_ajax():
        term = request.GET.get('term')
        all_guests = Vistor.objects.all().filter(full_name__icontains=term)        
        return JsonResponse(list(all_guests.values('full_name','city__name','dob')),safe=False)

данные отображаются в консоли очень хорошо! но я не могу добавить их в тег select! может я что-то не так сделал? заранее спасибо ..

Ваша идея использовать Ajax - хорошая идея. Проблема, как мне кажется, вот здесь

url: '{% url "booking:return_ajax_guests" %}',

{% %} используется, когда вы рендерите страницу в Django с помощью функции render, которая принимает url внутри { % %} и заменяет его на переменные в вашем представлении, вашем коде python django.

JavaScript загружается ПОСЛЕ того, как Django отрендерит страницу, так что это фактически создаст СТРОКУ '{% url "booking:return_ajax_guests" %}', что, конечно, не то, что вы хотите.

JQuery - не моя сильная сторона, но вы должны быть в состоянии передать url в вашем Ajax вызове следующим образом (я использовал это, используя Vanilla JavaScript fetch, и это работало отлично):

    url: 'booking:return_ajax_guests',

Во-первых, нет необходимости вручную создавать опции, select2 автоматически создает их при предоставлении правильных данных.

С учетом сказанного, ваши данные должны быть представлены в форме [{id: 'id', text: 'text'}, ...], чтобы они правильно работали с select2.

Попробуйте это

$('#guestinfo').select2({
    ajax: {
        url: '{% url "booking:return_ajax_guests" %}',
        dataType: 'json',
        data: function(params){ // you can delete this part if you don't intend to filter the data on the server
            return {
                search: params.term, // search term
            };
        },
        processResults: function (data, params) {
            return {
                results: data.map(({full_name}) => ({id: full_name, text: full_name}))
            };
        }
    },
    minimumInputLength: 0
});
Вернуться на верх