October CMS 提供了一个广泛的 AJAX 框架,我希望用它来填充 Select2 框。
根据 Select2,使用远程数据集的情况如下:
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
但是来自October CMS docs ,我无法弄清楚如何手动将数据传递到服务器。
问题是:要使用哪个 URL,我需要传递哪些参数,以便 October 知道我想访问哪个功能。另外,如何在不加载部分内容的情况下捕获结果?
这可能是一个微不足道的问题;我可能看错了方向。也许根本不应该使用 AJAX 框架。对正确的处理方式有何见解?
** 根据 SAMUEL 的正确答案进行编辑 **
要使 Select2 与 October CMS 结合使用远程数据集, 请考虑以下陷阱。以下是我的工作代码:
// SELECT 2
$('select').select2({
/*placeholder: "Your placeholder", // Remove this, this causes issues*/
ajax: {
// Use transport function instead of URL as suggested by Samuel
transport: function(params, success, failure) {
var $request = $.request('onSelect', {
data: params.data
});
$request.done(success);
$request.fail(failure);
return $request
},
dataType: 'json',
delay: 250,
data: function (params) {
console.log(params);
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data,params) {
console.log(data);
return {
// The JSON needs to be parsed before Select2 knows what to do with it.
results: JSON.parse(data.result)
};
},
cache: true
},
minimumInputLength: 1
});
下面是我结合此 Select2 示例使用的示例输出:
[
{
"id":1,
"text":"Henry Kissinger"
},
{
"id":2,
"text":"Ricardo Montalban"
}
]
以上 JSON 是由我的 VisitorForm.php 文件生成的:
<?php namespace XXX\VisitorRegistration\Components;
use Cms\Classes\ComponentBase;
use XXX\VisitorRegistration\Models\Visitor;
use October\Rain\Auth\Models\User;
class VisitorForm extends ComponentBase {
public function componentDetails()
{
return [
'name' => 'Visitor Form',
'description' => 'Description of the component'
];
}
// The function that returns the JSON, needs to be made dynamic
public function onSelect() {
return json_encode(array(array('id'=>1,'text'=>'Henry Kissinger'), array('id'=>2,'text'=>'Ricardo Montalban')));
}
}
瞧,希望这有用。
最佳答案
传递 transport
选项而不是 url
。这是一个例子:
$(".js-data-example-ajax").select2({
ajax: {
transport: function(params, success, failure) {
/*
* This is where the AJAX framework is used
*/
var $request = $.request('onGetSomething', {
data: params.data
})
$request.done(success)
$request.fail(failure)
return $request
},
dataType: 'json'
},
// ...
});
关于javascript - 如何通过内置的 Ajax 框架使用 October CMS 为 Select2 提供数据源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44407559/