組み込みのAjaxフレームワークを使用して、10月のCMSでSelect2のデータソースを提供する方法

Question

10月CMSは、Select2ボックスを設定するために使用する広範なAJAXフレームワークを提供します。

次のようにリモートデータセットを使用して起こるSelectセレクトによると、：

$(".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と、アクセスする必要のある機能を10月に知るためにどのパラメータを渡す必要があるかです。また、部分的にロードされずに結果をキャプチャする方法はありますか？

これは簡単な質問です。私は間違った方向を見ているかもしれません。おそらく、AJAXフレームワークをまったく使用しないでください。進むべき正しい方法についての洞察？

** 10月CMS、 次の落とし穴を考慮に入れてくださいとの組み合わせで、リモートのデータセットでSelectセレクト仕事をするためにSAMUEL **

正解FOLLOWING EDIT。以下は私の作業コードです：

以下

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

は、私がこのSelectセレクト例と組み合わせて使用​​する出力例です：

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

：JSON上記

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

は私のVisitorForm.phpファイルによって生成されました

これは役に立ちそうですか？

Answer 1

urlの代わりにtransportオプションを渡します。次に例を示します。

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