如何在 yii2 中使用 select2 与 ajax 和模板答案

【问题标题】：How to use select2 with ajax & templates in yii2如何在 yii2 中使用 select2 与 ajax 和模板
【发布时间】：2016-05-07 12:57:32
【问题描述】：

我想在搜索时显示多于 1 条信息，所以我使用了 select2 ajax & 模板。它使用 json。我更改了网址并在我的控制器上运行。但我有一个问题。它不能显示任何东西。有什么问题？这是我的代码：

脚本

$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'),
        ],
    ]);

控制器

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

【问题讨论】：

您收到的错误消息或控制台错误是什么？？
没有显示错误。但是当我输入单词时，我的 select2 不显示任何内容。
检查您的 php 错误。 $clean['more'] 是什么？它未在此范围内的任何位置分配。
对不起。我对此还不够了解。我从这个链接得到它：github.com/kartik-v/yii2-widgets/issues/5。但是，我认为，它只是一个存储数据的变量。

标签： php yii2

【解决方案1】：

您必须根据控制器操作将请求答案更改为Select2 的可解析答案。在您的情况下，您需要更改 Select2 的 processResults 以将 json 答案的 results 属性解析为结果：D。您必须轻松地将 $resultJs 更改为：

$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;

【讨论】：