如何在select2中為選擇標簽添加新選項-遠程資料

我已經實作了一個應用程式，其中一個表單的下拉欄位中有很多資料，加載該頁面需要一些時間，所以我想在 ajax 呼叫中加載它，但是回呼資料沒有創建新選項標簽并附加到選擇標簽，這是我嘗試過的

我嘗試了所有這些代碼，但沒有一個有效！

$(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)

控制臺中顯示的資料非常好！但我不能將它附加到選擇標簽中！請問我做錯了什么嗎？提前謝謝你.. 更新 控制臺中for回圈的資料

console.log（選項） console.log（資料）

uj5u.com熱心網友回復：

首先，不需要手動創建選項，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
});

uj5u.com熱心網友回復：

您使用 Ajax 的想法很好。問題，我想就在這里

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

當{% %}您在 Django 中使用 render 函式渲染頁面時使用 ，該函式將 url 中的 url{ % %}替換為您的視圖中的變數，即您的 python django 代碼。

JavaScript 在 Django 呈現頁面之后加載，因此這實際上會生成 STRING '{% url "booking:return_ajax_guests" %}'，這當然不是您想要的。

JQuery 不是我的強項，但你應該能夠像這樣在你的 Ajax 呼叫中傳遞 url（我使用 Vanilla JavaScript fetch使用它，它作業正常）：

    url: 'booking:return_ajax_guests',

標籤：javascript jQuery django jQuery-select2

上一篇：如何在JQuery中將單個類分配給多個變數

下一篇：由于javascript中的錯誤，我的FullCalendar無法正常作業