Railsで検索機能を導入してみた

はじめに

RailsでWebサービスを作っていく際、データベース内を検索する機能をつくるのに一工夫が必要でした。
そこで、どのようにして検索機能を搭載したかを記していきます。

環境

MacOS Catalina 10.15.7
Rails 5.2.4.4

手順

ヘッダー部分に検索機能のバーを搭載していきます。

header.html.erb

<div class="search-menu">
 <%= form_with url: "/search", method: "get", local: true do |form| %>
  <%= form.search_field :keyword, placeholder: "作品・ユーザーを検索", value: @keyword, size: "30" %>
  <button id="search-btn" type="submit"><i class="fa fa-search"></i></button>
 <% end %>
</div>

上記のような検索窓が出来上がります。
「作品・ユーザーを検索」の文字列は好きなように変えましょう。
これで、大枠の部分は完成。
次は、中身の部分について解説していきます。

search_controllerを作成し、以下のように記述します。

search_controller.rb

class SearchController < ApplicationController
  only: %i[show]

  def show
    @keyword = params[:keyword] || ''
    @keyword == '' ? (@digest = '全件の検索結果') : (@digest = "「#{@keyword}」の検索結果")
    @type = params[:type] || 'item'

    @items = Item.search(@keyword)
    @users = User.search(@keyword).where(admin: false)

    return (@results = @items) if @type == 'item'
    return (@results = @users) if @type == 'user'
  end
end

合わせて、検索結果の画面を作成していきます。

show.html.erb

<div class="container">
  <div class="search-digest">
    <%= "#{@digest}：#{@results.count}件" %>
    <% if @keyword != "" %>
      <h6 class="search-no-option"><%= link_to "全件検索を行う", "/search" %></h6>
    <% end %>
  </div>

  <ul class="user-tabs">
    <li class="<%= @type %>-" id="item"><%= link_to "作品(#{@items.count})", "/search?type=item&keyword=#{@keyword}", remote: true %></li>
    <li class="<%= @type %>-" id="user"><%= link_to "ユーザー(#{@users.count})", "/search?type=user&keyword=#{@keyword}", remote: true %></li>
  </ul>

  <div class="search-result">
    <%= render partial: "search/#{@type}", collection: @results %>
  </div>
</div>

item.html.erb

<div class="search-index-item">
  <div class="search-show-item">
    <%= link_to "/items/#{item.id}" do %>
      <%= image_tag item.image.url, alt: "作品の画像" %>
    <% end %>
  </div>

  <div class="search-item-wrapper">
    <div class="search-item-title">
      <%= link_to item.title, "/items/#{item.id}" %>
    </div>

    <div class="search-item-description">
      <%= item.story %>
    </div>

    <%= render "shared/evaluation", item: item, division: false %>
  </div>
</div>

user.html.erb

<div class="search-index-item">
  <div class="search-show-item">
    <div class="search-show-userimage">
      <%= link_to "/users/#{user.id}", alt: "ユーザーの画像" do %>
        <%= image_tag user.image.url %>
      <% end %>
    </div>
  </div>

  <div class="search-item-wrapper search-user">
    <div class="search-item-title">
      <%= link_to(user.name, "/users/#{user.id}") %>
    </div>

    <div class="search-item-description">
    </div>
  </div>
</div>

このような検索結果のタブが出来上がります。
（別途CSSを適用しています。）

気をつけること

対象となるデータベースはそれぞれ違うと思いますので、適宜変更してください。

おわりに

Railsで検索結果を取得するための方法に関する記事が少なかったので、作成してみました。
検索機能をつけると、Webサービスとして骨格が出来上がってきた感じがするので、オススメです。