在后台加载 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
我有一个 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