[Yii2]AutoCompleteの使い方とGWの事 ~ C-limber's high

2017年5月23日火曜日

[Yii2]AutoCompleteの使い方とGWの事

16:08 Posted by Unknown php, Yii2 No comments

もうゴールデンウィーク終わっちゃいましたね！

ほんとあっという間に終わっちゃいました。

GWに2回キャンプに行きました(^^)
エンジニアの井口です。

みなさんどうですか？案件に追われてますか？
弊社はありがたいことに、日々案件に追われております。
いつもありがとうございます。

今日はみなさんが大好きであろう、
Yii Framework2の便利な機能である、Autocomplete生成について紹介します。

Yii2でAutoCompleteを実装する

Yii2には、便利なウィジェットである、jui が実装されています。
ウィジェットというのは、Htmlの共通部分を切り出した、便利部品みたいなものですね
jui は jQuery ui の略です
読み方がわからないので、社内では「ジュイ」と読んでいます。(^_^);

参考：AutoComplete, yii\jui\AutoComplete - Yii Framework 2.0 API Documentation

Yii2の公式ドキュメントは完結に、しかもしっかりと内容が記載してあり、
かなり充実していると思うのですが、
autocompleteに関しては、公式ドキュメントに書かれていない、
ちょっと便利な使い方が見つけたので、共有します。

AutoCompleteに値を渡す

値を渡すことそのものに関しては、ドキュメントにあるように、

echo AutoComplete::widget([
    'name' => 'country',
    'clientOptions' => [
        'source' => ['USA', 'RUS'],
    ],
]);

と渡せます。
この場合、値は'USA', 'RUS'ですね。

今回はちょっとこだわって、

値を生成
値を別名をつけて生成
選択したあとにinput[type=hidden]のdomに値を受渡し

とやってみます。

多分この部分まで読んでくれているプログラマの人たちだけだと思うので、
（しかもYii好きな）
そのコードを見てもらうのが早いですね!

AutoCompleteの便利な使い方のコード

＜?php
    // autocomplete用に配列生成      
    $title_data = \common\models\CmsContent::find()
         ->select(['id as id', 'title as value']) // jsに渡すようにidとvalueを作成する idを受け渡す
         ->asArray()
         ->all();
      $page_id_datas = \common\models\CmsContent::find()
         ->select(['id as id', 'page_id as value'])
         ->andWhere(['!=', 'page_id', ''])
         ->asArray()
         ->all();
      $data = array_merge($title_data, $page_id_datas);

?>
＜?= AutoComplete::widget([
     'model' => $model,
     'attribute' => 'cms_content_search',
     'options' => [
        'class' => 'form-control'
      ],
     'clientOptions' => [
        'source' => $data,
        'select' => new JsExpression("function( event, ui ) {               
    $('.ajax_cms_content_id').val(ui.item.id);               
    $('.ajax_cms_content_id_selected').show();            
}")
     ],
  ]);
?>

ポイントは
値を生成する際に、

->select(['id as id', 'title as value’]) // jsに渡すようにidとvalueを作成する idを受け渡す

このように別名でカラムを読み出している点と、

'select' => new JsExpression("function( event, ui ) {               
    $('.ajax_cms_content_id').val(ui.item.id);               
    $('.ajax_cms_content_id_selected').show();            
}")

selectされたときに実行されるjsで、

ui.item.id

で値を取り出している点です。

Yii2は本当に気が利きますね。

すごく気が利くのに、素直なところがYii Frameworkのいいところだと思います(^_^)

ちょっと便利なYii2の機能の紹介でした

↓↓引き続き募集中です(^^)

弊社ではシステム開発、Web制作, Iot案件など幅広く対応しております。
ビジネスプランをお持ちの方、WEBアプリを使って何か新しいビジネスを始めたい方、
僕達が力になれるかもしれません
是非お問い合わせ下さい
-----------------------------------------------
同時に、デザイナー、システムエンジニア、HTMLコーダーの方を求人しております。
サーバ周りからデザイン、システムまでワンストップでの開発を経験できますので、
WEB開発の事を学びたい方にぴったりな職場だと思っております。
またそういった向上心あふれる方と一緒に成長してきたいと思っておりますので、
興味を持たれた方はとりあえずご連絡下さい(^^)
-----------------------------------------------
福岡のシステム開発・Web制作 C-limber（クライマー）株式会社

C-limber's high

2017年5月23日火曜日