javascript - 如何通过内置的 Ajax 框架使用 October CMS 为 Select2 提供数据源

Question

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')));
    }
}

瞧，希望这有用。

Answer 1

传递 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'
    },
    // ...
});