How to provide datasource for Select2 with October CMS via built-in Ajax Framework

The October CMS provides an extensive AJAX framework that I want to use to populate the Select2 window.

According to Select2, using a remote dataset goes like this:

$(".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 
});

      

        
        
        
      

    

But from the October CMS docs, I can't figure out how to manually transfer data to the server.

The questions are what url to use and what parameters i need to pass so october knows which function i want to access. Also, how can I capture the result without partial loading?

This may be a trivial question; Perhaps I am looking in the wrong direction. Perhaps AJAX frameworks shouldn't be used at all. Any information on the correct way to proceed?

** CHANGE CORRECT ANSWER BY SAMUEL **

To make Select2 work with a remote dataset in conjunction with the October CMS, please consider the following pitfalls. Below is my working code:

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

      

        
        
        
      

    

Below is a sample output that I used in conjunction with this Select2 example:

[  
   {  
      "id":1,
      "text":"Henry Kissinger"
   },
   {  
      "id":2,
      "text":"Ricardo Montalban"
   }
]

      

        
        
        
      

    

Above the JSON my VisitorForm.php file was generated:

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

      

        
        
        
      

    

Voilà, I hope this can be helpful.