文字検索機能の実装

1.目的

簡単に見たいと思うレビューを検索をすることで見つけ出すことができます。

2.扱うgem

なし

3.方法

①routes.rbを以下のように編集していきます。

Rails.application.routes.draw do
mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
devise_for :users
root to: 'items#index' do
   collection do
     get :search
   end
end
resources :items 
resources :users, only: [:show,:index,:edit,:update,:destroy] 

*collectionを使用してsearchアクションを定義しています。

*collectionとmemberは、ルーティングを設定するときに使用できます。これを使用することで、生成されるルーティングのURLを任意にカスタムすることができます。collectionは、ルーティングに:idがつかない、memberは:idがつくという違いがあります。

②ヘッダーに検索フォームを追加します。
header.html.erbを以下のように編集します。

<div class="search-bar-contents">
       <%= link_to image_tag("soundreview.png", class:"top-icon"), "/" %>
       <%= form_with(url: search_items_path, local: true, method: :get, class: "search-form",id: "niko") do |f| %>
         <%= f.text_field :keyword,id:"result-div", placeholder: "ボタンをクリックで音声検索", class: "input-box" %>
         <div id="start-btn2"  class="search-button2">
           <%= image_tag "maic.png", class:"search-icon2" %>
          
         </div>
         <button id="start-btn"  class="search-button">
           <%= image_tag "search.png", class:"search-icon" ,id: "img-btn" %>
          
         </button>
       <% end %>
     </div>

form_withのtext_fieldとsubmitを使って検索窓と検索ボタンを作成しました。

③検索のメソッドをモデルに定義してきます。
データの処理などを行うプログラムの処理のことをビジネスロジックと言います。
今回のメソッド名は、searhメソッドとします。
item.rbを以下のように編集します。

def self.search(search)
   if search != ''
     Item.includes(:user).joins(:user).where([
                                               'name LIKE(?) OR text LIKE(?) OR users.nickname LIKE (?) OR minicategory LIKE(?) ', "%#{search}%", "%#{search}%", "%#{search}%", "%#{search}%"
                                             ])
   else
     Item.includes(:user).order('created_at DESC')
   end
 end

因数のsearchは、検索フォームから送信されたパラメーターが入るため、if search != ''とし検索フォームに何か値が入力されていた場合を条件としています。

・whereメソッドは、モデルが使用できるActiveRecordメソッドの1つです。モデル.where(条件)と因数部分に条件を指定することで、テーブル内の「条件に一致したレコードのインスタンス」を配列の形で取得できます。
条件と一致するレコードを全て取得することができます。

・LIKE句は、曖昧な文字列を検索する時に使用するものでwhereメソッドと一緒に使います。％％によって囲まれた文字を含むものだけを取得します。

④searchアクションをコントローラーに定義します。
items_controller.rbを以下のように編集します。

class ItemsController < ApplicationController
 before_action :authenticate_user!, except: [:index, :show, :search]
　　def search
   @items = Item.search(params[:keyword])
 end
end

Itemモデルに書いたsearchメソッドを呼び出しています。
searchメソッドの因数にparams[:keyword]と記述して、検索結果を渡しています。

⑤検索結果画面のビューを作成します。
app/views/itemsディレクトリ以下にsearch.html.erbファイルを作成し以下のように編集を行います。

<%=render "shared/header"%>
<div class='main'>
       <div class="search">
         <h1>search results</h1>   
       </div>
       <div class='item-contents'>
         <h2 class='title'>Pick Up</h2>
         <div class="subtitle" >
           movie reviews
         </div>
         <ul class='item-lists'>
     
           <%@items.each do |item|%>
           <li class='list'>
             <%= link_to item_path(item.id),class:"link" do %>
             <div class='item-info'>
               
               <%= item.name%>
               
             </div>
             <div class='item-img-content'>
               
               <%if item.image.attached? %>
                 <%= image_tag item.image, class: "item-img"  %>
               <%else%>
                 <%= image_tag 'soundreview2.png', class: "item-img"  %>
               <%end%>  
             </div>
             <div class="profile-all">
             <div class="profile2">
               <% if item.user.image.attached? %>
                 <%=link_to user_path(item.user.id),class:"user-icon4" do %>
                   <%= image_tag item.user.image, class: "user-icon4" %>
                 <%end%>  
               <% else %>
                 <%=link_to user_path(item.user.id) ,class:"user-icon4" do %>
                   <%= image_tag "willy.png", alt: "user-icon", class: "user-icon4" %>
                 <%end%>
               <% end %>
             </div>
             <div class="item-create">
               <div class="item-user-name">
                 <%= link_to item.user.nickname, user_path(item.user.id) %>
               </div> 
               <div class="created_at" >
                   <%=item.created_at.strftime('%Y/%m/%d')%>
               </div>
             
             </div>
             </div>
             
             
             
             
             <% end %>
           </li>
           <%end%>
         </ul>
         
        
       </div> 
         
</div>
<%=render "shared/footer"%>こ

これで文字検索機能は、完成です。

○追加css

app/assets/stylesheets/shared以下にファイルを配置します。

search.scss

335 Bytes

ファイルダウンロードについて

ダウンロード

4.まとめ

以下のように表示されたらOK!です。

ありがーとございましーた！！