如何在yii2中使用带有ajax和模板的select2

Question

I want to display more than 1 information when searching, so I use select2 ajax & templates. It use json. I change the url and I make function on my controller. But I have a problem. It can not show anything. What's the problem? This is my code:

script

$formatJs = <<< 'JS'
        var formatPenerima = function (penerima) {
            if (penerima.loading) {
                return penerima.text;
            }
            var markup =
            '<div class="row">' + 
                '<div class="col-sm-5">' +
                    '<b style="margin-left:5px">' + penerima.nama + '</b>' + 
                '</div>' +
                '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + penerima.no_telepon + '</div>' +
                '<div class="col-sm-3"><i class="fa fa-star"></i> ' + penerima.email + '</div>' +
            '</div>';
            return '<div style="overflow:hidden;">' + markup + '</div>';
        };
        var formatPenerimaSelection = function (penerima) {
            return penerima.nama || penerima.text;
        }
JS;

    // Register the formatting script
    $this->registerJs($formatJs, \yii\web\View::POS_HEAD);

    // script to parse the results into the format expected by Select2
    $resultsJs = <<< JS
    function (data, params) {
        params.page = params.page || 1;
        return {
            results: data.items,    // check here
            /*pagination: {
                more: (params.page * 30) < data.total_count
            }*/
        };
    }
JS;

form.php

echo Select2::widget([
        'name' => 'kv-repo-template',
        'value' => '14719648',
        'initValueText' => 'kartik-v/yii2-widgets',
        'options' => ['placeholder' => 'Search for a repo ...'],
        'pluginOptions' => [
            'allowClear' => true,
            'minimumInputLength' => 1,
            'ajax' => [
                // 'url' => "https://api.github.com/search/repositories",
                'url' => Url::to(['paket/jsonlist']),
                'dataType' => 'json',
                'delay' => 250,
                'data' => new JsExpression('function(params) { return {q:params.term, page: params.page}; }'),
                'processResults' => new JsExpression($resultsJs),
                'cache' => true
            ],
            'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
            'templateResult' => new JsExpression('formatPenerima'),
            'templateSelection' => new JsExpression('formatPenerimaSelection'),
        ],
    ]);

controller

public function actionJsonlist($search = NULL, $no_induk = NULL)
    {
        header('Content-type: application/json');
        $clean['more'] = false;

        $query = new \yii\db\Query;
        if(!is_Null($search))
        {
            $mainQuery = $query->select('no_induk, nama, no_telepon, email')
                               ->from('penerima');
            $command = $mainQuery->createCommand();
            $rows = $command->queryAll();
            $clean['results'] = array_values($rows);
        }
        else
        {
            if(!is_null($no_induk))
            {
                $clean['results'] = ['no_induk'=> $no_induk, 'nama' => \frontend\models\Penerima::find($no_induk)->nama,
                    'no_telepon' => \frontend\models\Penerima::find($no_induk)->no_telepon, 'email' => \frontend\models\Penerima::find($no_induk)->email];
            }else
            {
                $clean['results'] = ['no_induk' => null, 'nama' => 'None found', 'no_telepon' => 'None found', 'email' => 'None found'];
            }
        }
        echo \yii\helpers\Json::encode($clean);
        exit();
    }

Answer 1

You must change the request answer, based on you controller action to a parse-able answer for Select2. In your case, you need to change processResults of Select2 to parse results property of json answer as result :D. Easily you must change $resultJs to this:

$resultsJs = <<< JS
    function (data, params) {
        params.page = params.page || 1;
        return {
            // Change `data.items` to `data.results`.
            // `results` is the key that you have been selected on
            // `actionJsonlist`.
            results: data.results
        };
    }
JS;