【Laravel】検索機能の実装③ ~multipleを使って複数選択可能に~

以前⬇️の記事で、プルダウンから選択して検索できる機能を実装しました。

ここで作成した検索機能を、プルダウンから複数選択して検索できるようにアップデートしてみます。

作成物

「媒体」を複数選択して検索できるようになっています。

ビューの編集

今回編集したのは、「媒体」検索機能のselect要素のみです。

select要素のname属性を配列にして、選択されたoption要素を配列で受け取れるようにします。
またselect要素にmultiple属性を加えます。

index.blade.php

<form action="{{ route('index') }}" method="GET">

//略

<label for="">媒体
  //元のコード　　<select name="medium">
  <select name="medium[]" multiple>
    <option value="">全て</option>
    @foreach ($media_list as $media_item)
      <option value="{{ $media_item->getMedium() }}">{{ $media_item->getMedium() }}</option>
    @endforeach
  </select>
</label>

//略

</form>

ルートの確認

ルートは以前作成した通りです。

web.php

Route::get('/', [TeachingMaterialController::class, 'index'])->name('index');

コントローラーの編集

今回編集したのは「媒体」の検索部分のみです。

TeachingMaterialController.php

class TeachingMaterialController extends Controller
{
    public function index(Request $request)
    {
        //略
        
        //元のコード
        if(!empty($media)) {
            $query->where('medium', '=', $medium);
        }

        //編集後のコード
        if(!$media[0]==null) {
            foreach($media as $medium) {
                $query->orwhere('medium', '=', $medium);
            }
        }

       //略

解説

• 元々のフォームでは、option要素の「全て」を選択した場合はvalue=""の通り空のデータとなり、$mediaの中身は空でした。
• 今回フォームのselect要素のname属性を配列にしたことで、「全て」を選択した場合の$mediaの中身は以下のようになります。よってif文の!empty($media)を!$media[0]==nullという条件に変更しました。

array (
  0 => NULL,
)  

• if文の中で、$mediaで受け取った配列の中身ひとつずつに対して、データの絞り込みを行います。

## 参考記事 http://html5.cyberlab.info/elements/forms/select-multiple.html