Railsチュートリアル 機能拡張【ユーザー検索】
Railsチュートリアルで作ったsample_appに機能を拡張していく
今回は、Ransack Gemを利用してユーザー検索機能を組み込みます。
下記の記事を参考にさせていただきました。
https://github.com/activerecord-hackery/ransack
https://qiita.com/YN6127yn/items/fca9efa22536b8b2a9ef
https://qiita.com/LuckOfWise/items/e020e896e71d47d0c6a4
準備
Ransackのインストール
https://github.com/activerecord-hackery/ransack
Gemfileに追記し、bundle installします。
gem 'ransack'
bundle install
インストール後にサーバーを再接続する。
実装
コントローラーにRansackを埋め込む
[app/controllers/user_controller.rb] class UsersController < ApplicationController . . def index # @users = User.where(activated: true).paginate(page: params[:page]) if params[:q] && params[:q].reject { |key, value| value.blank? }.present? @q = User.ransack(search_params, activated: true) @title = "Serch Result" else @q = User.ransack(activated: true) @title = "All users" end @users = @q.result.paginate(page: params[:page]) end . . . private def search_params params.require(:q).permit(:name_cont) end . . end
rejectメソッドを使い空白で検索したときはAll Usersを返すようにしている
Viewにsearch_form_forを加える
[app/views/users/index.html.erb] <% provide(:title, @title) %> <h1><%= @title %></h1> <!-- 検索機能 --> <%= search_form_for @q do |f| %> <%= f.label :name_cont %> <%= f.search_field :name_cont %> <%= f.submit %> <% end %> <%= will_paginate %> <ul class="users"> <%= render @users %> </ul> <%= will_paginate %>
取り敢えずできた。
全ユーザー
検索結果
Viewに修正を加える
<!-- 検索機能 --> <div class="row"> <div class="search_form"> <%= search_form_for @q do |f| %> <%= f.label :name_cont, 'User Search'%> <div class="input-group"> <%= f.search_field :name_cont, placeholder: "Enter username..", class: 'form-control' %> <span class="input-group-btn"> <%= f.submit 'Search', class: "btn btn-primary" %> </span> </div> <% end %> </div> </div>
scssに追記する
[app/asets/stylesheets/custom.scss] . . /* Search form */ .search_form { overflow: auto; margin: 10px; .input-group { width: 305px; } }
パーシャルにする
_search.html.erbというファイルを作りぶっこむ
[app/views/users/_search.html.erb] <div class="row"> <div class="search_form"> <%= search_form_for @q do |f| %> <%= f.label :name_cont, 'User Search'%> <div class="input-group"> <%= f.search_field :name_cont, placeholder: "Enter username..", class: 'form-control' %> <span class="input-group-btn"> <%= f.submit 'Search', class: "btn btn-primary" %> </span> </div> <% end %> </div> </div>
index.html.erbを修正
[app/views/users/index.html.erb] <% provide(:title, @title) %> <h1><%= @title %></h1> <%= render 'search' %> <%= will_paginate %> <ul class="users"> <%= render @users %> </ul> <%= will_paginate %>
すっきり〜!!
完成
こんな感じ
全ユーザー
検索結果