入力値を保持しておく(old)

検索機能を作成した。

実際に動かせるものの、検索ボタンを押すごとに入力したキーワードが削除されてしまう。

この入力値を維持する方法としてoldメソッドがある。

改善するコード

<form method="GET" action="{{ route('evaluation.index', ['book_id' => $book->id]) }}" class="mb-4">
    <div class="p-3 d-flex justify-content-center align-items-center">
        <input type="text" name="keyword" value="{{ old('keyword', $keyword) }}" 
        class="form-control w-50 me-2" placeholder="検索キーワードを入力">
        <select name="rating" class="form-select ms-4">
            <option value="">評価を入力</option>
            <option value="1">⭐️</option>
            <option value="2">⭐️⭐️</option>
            <option value="3">⭐️⭐️⭐️</option>
            <option value="4">⭐️⭐️⭐️⭐️</option>
            <option value="5">⭐️⭐️⭐️⭐️⭐️</option>
        </select>
        <button class="btn btn-primary ms-5">検索</button>
    </div>
</form>

改善後

<form method="GET" action="{{ route('evaluation.index', ['book_id' => $book->id]) }}" class="mb-4">
    <div class="p-3 d-flex justify-content:center">
        <input type="text" name="keyword" value="{{ old('keyword', $keyword) }}" 
        class="form-control w-50 me-2" placeholder="検索キーワードを入力">
        <select name="rating" class="ms-4">
            <option value="">評価を入力</option>
            <option value="1" {{ old('rating', $rating ?? '') == '1' ? 'selected' : '' }}>⭐️</option>
            <option value="2" {{ old('rating', $rating ?? '') == '2' ? 'selected' : '' }}>⭐️⭐️</option>
            <option value="3" {{ old('rating', $rating ?? '') == '3' ? 'selected' : '' }}>⭐️⭐️⭐️</option>
            <option value="4" {{ old('rating', $rating ?? '') == '4' ? 'selected' : '' }}>⭐️⭐️⭐️⭐️</option>
            <option value="5" {{ old('rating', $rating ?? '') == '5' ? 'selected' : '' }}>⭐️⭐️⭐️⭐️⭐️</option>
        </select>
        <button class="btn btn-primary ms-5">検索</button>
    </div>
</form>

改善前のコードの以下の部分に

  <option value="1">⭐️</option>
  <option value="2">⭐️⭐️</option
  <option value="3">⭐️⭐️⭐️</option>
  <option value="4">⭐️⭐️⭐️⭐️</option>
  <option value="5">⭐️⭐️⭐️⭐️⭐️</option>

以下のoldを付け加える

<option value="1" {{ old('rating', $rating ?? '') == '1' ? 'selected' : '' }}>⭐️</option>
<option value="2" {{ old('rating', $rating ?? '') == '2' ? 'selected' : '' }}>⭐️⭐️</option>
<option value="3" {{ old('rating', $rating ?? '') == '3' ? 'selected' : '' }}>⭐️⭐️⭐️</option>
<option value="4" {{ old('rating', $rating ?? '') == '4' ? 'selected' : '' }}>⭐️⭐️⭐️⭐️</option>
<option value="5" {{ old('rating', $rating ?? '') == '5' ? 'selected' : '' }}>⭐️⭐️⭐️⭐️⭐️</option>

追記したコードについて

{{ old('rating', $rating ?? '') == '1' ? 'selected' : '' }}

oldメソッドは
old('name属性に対応するもの', '値がなかった時の初期値（代替値）’) という扱い方をする。
$rating ?? ''はnullの場合に備えるために記述したもの。

== '1' ? 'selected' : '' は三項演算子を使用している。
条件 ? 真のときの値 : 偽のときの値
というような書き方をする。

一致していればselected（選択されている状態）を返し、違うのならば何もしない、という処理。