1

Yii2 検索モデルで jquery-select2 (リモート データの読み込み) プラグインを使用しようとしています。現時点では、コントローラーは検索モデルから作成された $dataProvider を返します。ただし、select2 がドロップダウンの作成に使用できる形式ではないことは明らかです。

2 つを連携させるには、$dataProvider または select2 に対して何をする必要がありますか?

私の見方では、2つのオプションがあります：

  1. $dataProvider から 'cat_name' を抽出し、select2 が使用できる形式にします。
  2. $dataProvider の読み方を select2 に教えます。

2 をどのように行うかはわかりませんが、「タグ付け」機能の実装が難しくなると思われるため、1 に傾いています。

どんな助けでも大歓迎です。

これが私のコードです：

コントローラ側

public function actionCatSearch($q)
{
    if (Yii::$app->request->isAjax) {

        $searchModel = new CatSearch();
        $dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);

        return $dataProvider->models;


    }
}

JS側

$(document).ready(function(){    
  $('.js-select').select2({
    tags: true,
    ajax: {
        url: 'cat-search',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 1
  }); 
});
4

2 に答える 2

1

時間はかかりましたが、なんとか理解することができました。発生する必要があることがいくつかあります。まず、Yii2 の組み込みシリアライザーを使用し、次にjson_encode結果を使用します。

スクリプト側では、 を使用する必要がありましたtemplateResult。

ここにすべてが変更されています：

コントローラ側

public function actionCatSearch($q)
{
    if (Yii::$app->request->isAjax) {

        $searchModel = new CatSearch();
        $dataProvider = $searchModel->search(['catSearch' => ['cat_name' => $q]]);

        $serial = new Serializer();
        $test = $serial->serialize($dataProvider);

        return json_encode($test);

    }
}

スクリプト側

function formatStuff (stuff) {
  if (stuff.loading) return 'Searching...';

  markup = "<p>" + stuff.cat_name + "</p>";

  return markup;
}

$(document).ready(function(){    
  $('.js-select').select2({
    tags: true,
    ajax: {
        url: 'cat-search',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatStuff,
  });   
});
于 2015-09-16T20:03:00.990 に答える