はじめに
オリジナルアプリに検索機能を実装したので、簡単な仕組みを記事に残しておきたいと思います。
ソースコードはあくまで私のアプリから抜粋しているのでわかりづらいかもしれませんが、ご了承ください。
よろしくお願いします。
検索フォームの作成
検索フォームはform_withを使って実装しました。
メソッドはgetで、local: trueの記述は忘れずに記載します。
非同期で実装するときはremote: trueとなるのですが、form_withはデフォルトがremoteとなっていうので、記述する必要はないらしいです。
<%= form_with(url: search_teachers_textbook_path(@teachers_textbook.id), remote: true, method: :get, class: "student-search-form") do |form| %>
<%= form.text_field :keyword, placeholder: "生徒を検索する", class: "search-input" %>
<%= form.submit "検索", class: "search-btn" %>
<% end %>
searchアクションのルーティング設定
今回は自作でsearchアクションを作って検索ボタンを押した時の処理を書きます。
前回の記事で説明したcollectionとmemberのどちらかを使って設定をします。
前回の記事はこちら↓
私は、idを渡したかったのでmemberを使って実装しました。
ルーティングは下記のようになりました。
#省略
resources :textbooks do
member do
get "search"
end
end
これで各textbooksのidを渡せます。
モデルに検索の処理を書く
検索の処理を行う場合は、あるテーブルから情報を引っ張り出してくるという流れがあるはずです。
検索をかけたいテーブルのモデルにsearchメソッドを定義します。
ここで記述するのは検索をかけた時の、取り出し方を記述するイメージです。
#省略
def self.search(search)
if search != ""
Student.where('name LIKE(?)', "%#{search}%")
else
Student.all
end
end
この記述は、検索フォームに入力された文字列が、Studentテーブルのnameカラムに含まれるレコードを検索しています。
もし検索フォームが空だったら全て取り出します。
searchアクションをコントローラへ記述
searchアクションをコントローラーへ記述し、先ほど定義したsearchメソッドを使って変数に格納しています。
#省略
@students = Student.search(params[:keyword])
#省略
ここではこれだけしか書いていませんが、私はビューで使う変数などがたくさんあったり、変数の中身をいろいろ加工したかったので実際は他にも処理を書いています。
params[:keyword]と記述することで検索結果を渡しています。
検索結果のビューを作成
searchアクションに対応するビューはの名前はsearch.html.erbとなります。
その名前のファイルを適切な場所（私の場合はtextbooksコントローラのsearchアクションなので、app/views/textbooks/search.html.erbとなります。
searchアクションが行われた後のビューをこのファイルに記述して完成です。
終わりに
検索機能を想像するとなんとなく難しいイメージでしたが意外と簡単でした。
これをインクリメントサーチにするとすごく複雑そうだったので今回はこの方法で実装しました。