初心者向け : Railsログイン機能をつけてQAサイトを作る 6 -検索機能-

初心者向け : Railsログイン機能をつけてQAサイトを作る 1 -ログイン機能+質問機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 2 -Bootstrap+UI修正-
初心者向け : Railsログイン機能をつけてQAサイトを作る 3 -回答機能+リアクション機能+ベストアンサー機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 4 -タグ付け機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 5 -管理画面機能-
初心者向け : Railsログイン機能をつけてQAサイトを作る 6 -検索機能-

今回は質問を検索する機能を作成します

検索機能はransackというgemを利用して作成します

Gemfileにこちらを追加します

gem 'ransack'

1	gem 'ransack'

追加後はターミナルでこちらを実行

$ bundle install

1	$ bundle install

次はQuestionのタイトルを検索することができるように
questions_controller.rbのindexアクションをこのように修正します

def index
    @q = current_user.questions.ransack(params[:q]) if current_user.role == '質問者'
    @q = Question.ransack(params[:q]) if current_user.role == '回答者'
    @questions = @q.result(distinct: true)
  end

def index

@q = current_user.questions.ransack(params[:q]) if current_user.role == '質問者'

@q = Question.ransack(params[:q]) if current_user.role == '回答者'

@questions = @q.result(distinct: true)

end

最後にviews/questions/index.html.erbをこのように修正して完了です

<div class="container">
  <header class="jumbotron my-4">
    <h1 class="display-3">質問一覧</h1>
    <!--質問者のみ質問ができるように修正-->
    <% if current_user.role == '質問者' %>
      <%= link_to '質問する！', new_question_path, class: 'btn btn-primary btn-lg' %>
    <% end %>
  </header>

  <!--ここから-->
  <%= search_form_for @q do |f| %>
    <%= f.label :title_cont %>
    <%= f.search_field :title_cont %>
    <%= f.submit %>
  <% end %>
  <!--ここまで-->

  <div class="row text-center">
    <% @questions.each do |question| %>
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="card h-100">
          <img class="card-img-top" src="http://placehold.it/500x325" alt="">
          <div class="card-body">
            <h4 class="card-title"><%= question.title %></h4>
            <p class="card-text"><%= question.body %></p>
          </div>
          <div class="card-footer">
            <%= link_to '詳細', question %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

<% if current_user.role == '質問者' %>

<%= link_to '質問する！', new_question_path, class: 'btn btn-primary btn-lg' %>

<% end %>

</header>

<%= search_form_for @q do |f| %>

<%= f.label :title_cont %>

<%= f.search_field :title_cont %>

<%= f.submit %>

<% end %>

<% @questions.each do |question| %>

</div>

<%= link_to '詳細', question %>

</div>

<% end %>

</div>

「回答者」としてログインして検索できるか試してみます
先程追加した検索フォームが表示されているので、「動物」で検索します

「検索ボタン」を押すと
「動物」に該当する質問のみが表示されました

ちなみに今回は「title_cont」を設定しましたが、以下のように使い分けることで
様々な検索機能を実装できるようです

title_eq	titleが完全一致しているレコードのみ表示
title_cont	titleが部分一致しているレコードのみ表示
title_not_cont	titleが部分一致していないレコードのみ表示

最後の「title_not_cont」でコード実装してみます

views/questions/index.html.erbの検索部分を修正

<%= search_form_for @q do |f| %>
    <%= f.label :title_not_cont %>
    <%= f.search_field :title_not_cont %>
    <%= f.submit %>
  <% end %>

<%= search_form_for @q do |f| %>

<%= f.label :title_not_cont %>

<%= f.search_field :title_not_cont %>

<%= f.submit %>

<% end %>

「動物」で検索をかけた結果「動物」以外が表示されます

参考記事

Railsアプリに簡単に検索フォームを実装する方法とは？

railsで検索するならRansack!!!!!!!!!!!!

参考記事

人気の記事