#はじめに
前回の記事【Railsチュートリアル】いいね機能の実装に引き続きRailsチュートリアル第6版sample_appの機能拡張を進めていく。
今回は以下の様なユーザー検索機能を実装していく。
前提
第6版sample_appが完成している
#手順
Gemfileにransackを追加
Gemfile
gem 'ransack'
検索フォームを作成
app/views/users/_search_form.html.erb
<%= search_form_for @q do |f| %>
<%= f.label :name_cont, 'User Search' %>
<div class="input-group">
<%= f.text_field :name_cont, placeholder: "Enter username...",
class: 'form-control' %>
<span class="input-group-btn">
<%= f.submit 'Go', class: "btn btn-primary" %>
</span>
</div>
<% end %>
ユーザーコントローラーを変更
app/controllers/users_controller.rb
class UsersController < ApplicationController
.
.
.
def index
if params[:q] && params[:q].reject { |key, value| value.blank? }.present?
@q = User.ransack(search_params, activated_true: true)
@title = "Search Result"
else
@q = User.ransack(activated_true: 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
ビューを変更
app/views/users/index.html.erb
<% provide(:title, 'All users') %>
<h1>All users</h1>
<div class="row">
<div class="search_form">
<%= render 'users/search_form' %>
</div>
</div>
<%= will_paginate %>
<% unless @users.empty? %>
<ul class="users">
<%= render @users %>
</ul>
<% else %>
<p class="search_message">
Couldn't find any user.
</p>
<% end %>
<%= will_paginate %>
cssを追加
app/assets/stylesheets/custom.scss
/* search_form */
.search_form {
overflow: auto;
margin: 10px;
float: left;
.input-group {
width: 300px;
.form-control {
width: 250px;
}
.btn {
width: 50px;
}
}
}
.search_message {
margin-top: 30px;
font-weight: bold;
font-size: 1.3em;
}