使用YII Framework选择2 ajax选项

Question

I am using Yii framework on a project and i am using an extension which uses select2 jquery. I am unable to grasp how the implementation for ajax works with this extension or the select2.

My ajax call returns the following json.

    [
    {"id":"1", "text" : "Option one"},
    {"id":"1", "text" : "Option one"},
    {"id":"1", "text" : "Option one"}
    ]

The yii extension enfolds the select2 extension as below

$this->widget('ext.select2.ESelect2', array(
                    'name' => 'selectInput',
                    'ajax' => array(
                       'url'=>Yii::app()->createUrl('controller/ajaxAction'),
                        'dataType' => 'json',
                        'type' => 'GET',
                        'results' => 'js:function(data,page) { 
  var more = (page * 10) < data.total; return {results: data, more:more };
                             }',
                        'formatResult' => 'js:function(data){
                                 return data.name;
                              }',
                        'formatSelection' => 'js: function(data) {
                                return data.name;
                              }',
                    ),
                ));

I found a related question from this Question! The link to the extension am using is YII select2 Extention!

Answer 1

So a week later i merged with the answer to this question.

First let me highlight how the select2 ajax or in my case the Yii ESelect Extension.

The ajax options for jquery are the same as for the Eselect Extention i.e. url,type and datatype altho there is a slight difference on the format returned after successfully querying.

As for the result set for Eselect/select2 expects two parameters to be returned. that is

id : data.myOptionsValue;
text : data.myOptionText;

Reference :: https://select2.github.io/options.html#ajax

if we want to customize the format for the result set that is retured we can go a head and extend the plugin by using

 'formatResult' => 'js:function(data){
                                     return data.name;
                                  }',
                            'formatSelection' => 'js: function(data) {
                                    return data.name;
                                  }',

I also had an issue getting my head around how the extention was quering. A look around and i realised that we have two datatype jsonp and json these two datatypes will handle data differently.

Jsonp (json padding) allows sending query parameters when querying. As for my case i am not passing any other parameters e.g an authkey e.t.c. In my case i changed the datatype to json and returning a json with id and text as results. See below my working snippet.

 echo CHtml::textField('myElementName', '', array('class' => 'form-control col-lg-12'));
$this->widget('ext.select2.ESelect2', array(
                'selector' => '#myElementName',
                'options' => array(
                    'placeholder' => 'Search ..',
                    'ajax' => array(
                        'url' => Yii::app()->createUrl('controller/ajaxAction'),
                        'dataType' => 'json',
                        'delay' => 250,
                        'data' => 'js: function(term) {
                    return {
                        q: term,
                    };
                }',
                        'results' => 'js: function(data){


                return {results: data }
            }',
                    ),
                ),
            ));