在后台加载 ajax select2 数据的页面

Loading pages of ajax select2 data in the background

我有一个 AJAX select2 下拉菜单设置为进行无限分页。我想做的是继续并在后台加载结果的第一页,这样一旦用户单击下拉列表,他们就会立即有一组选项,而不是等待初始 AJAX打电话。

当我搜索 Google 如何执行此操作时,我只看到有关尝试设置初始选择的结果,这不是我想要做的。我只想从我的端点预加载结果的第一页,以便用户立即看到数据,而不是等待 AJAX 调用 return。这甚至可能吗?

我的 select2 设置代码如下:

$(".my-class-identifier").select2({

        ajax: {
            cache: true,
            dataType: "json",
            delay: 500, 
            data: function(params, page) {

                return {
                    name: params,
                    otherParams: $(this).data("other-params")
                    page: page                      
                };

            },
            results: function(data, page) {

                return {
                    /* The server returns no data after all the pages have been returned. */
                    more: data && data.length > 0,
                    results: data
                };

            },
            type: "GET",
            url: function() {
                if ($(this).data("url")) {
                    return $(this).data("url");
                } else {
                    return DEFAULT_ENDPOINT;
                }
            }
        },
        allowClear: true,
        minimumInputLength: 0,
        placeholder: "Search for some data..."          
    });

在你的后端如何,你检查你的搜索字符串。如果大小为零或搜索字符串为空,则发回您的首页结果。否则,进行搜索并 return 结果。

所以你正在寻找的是初始化你的 select2。 Select2 有一个初始化选项来加载你的值,它看起来像这样:

    initSelection: function(element, callback){
        callback([
           {id:1,text:'one'},
           {id:2,text:'two'},
        ]);
    }

请务必将其添加到 ajax 调用之外,但要添加到 select2 中。

一个例子here in JSFiddle