【Railsチュートリアル】ユーザー検索機能の実装

はじめに

前回の記事【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;
}