はじめに

今回は検索フォームを実装です。

今回は記事のタイトルを検索すると指定したキーワードで記事を検索することができるというものを実装していきます。

実装

routes

今回は「collection」を使用しますが
データを特定したい場合は「member」を使用します。
「member」を使用するとルーティングに「id」がつきます。

このように記述されています。↓

またそのアクションを動かすときにparamsで「:id」を受け取りたい場合はmemberを使用し、
特にidを指定して特定のページにいく必要がない場合は、collectionを使用してアクションを追加する。

そしてその他参考にしたのがこちらです。

Railsのルーティングを学ぼう②

railsガイド

config/routes.rb


 resources :albums do
    collection do
      get 'search'
    end
  end

controller

コントローラには「search」メソッドを使用し、「 (params[:keyword]) 」と記述し、

「:keyword」を取得できるようにします。

controllers/albums_controller.rb


  def search
    @albums = Album.search(params[:keyword])
  end

models

こちらには検索内容を指定しています。

WhereメソッドとLIKEは以前学習しています。詳しくはこちら

「LIKE」を使う
「LIKE」を使うと特殊な記号も使用することができます。

「 % 」パーセント記号 →　任意の文字列（空白文字列を含む）（1文字以上）

「 _ 」アンダースコア記号 →　任意の1文字

[MySQL]データ検索をする

さらにわかりやすいのはこちら

pikawaka:【Rails】whereメソッドを使って欲しいデータの取得をしよう！

models/album.rb


 def self.search(search)
    if search !=""    # 空じゃなければ検索します。　
      Album.where('title LIKE(?)', "%#{search}%")
    else
      Album.all
    end
  end

views

検索する部分は「form_with」を使用して実装していきます。

「text_field」の部分には「:keyword」と記述します。

　
ルーティングをはじめのように設定するとこのようになっています。

controllerの部分で記述した通り、送信すると

　　　「:keyword」（検索したいワード）がparamsに入り

　　　　　whereメソッドで検索して

　　　　　　　urlの部分の「search_albums_path」に送られます。

views/pics/index.html.erb



     <%= form_with(url: search_albums_path, local: true, method: :get, class: "search-form") do |f| %>
       <div class="search-inside">
         <%= f.text_field :keyword, placeholder: "記事を検索する", class: "search-box" %>
       </div>
       <div class="search-inside">
         <%= f.submit "検索", class: "search-btn btn" %>
       </div>
     <% end %>

検索部分はこのような感じになっています。
CSSの部分は省略していますがお好みで装飾します。

表示する部分はこのように記述しています。

views/albums/search.html.erb



     <% @albums.each do |album| %>
       <li class="list">
         <%= link_to album_path(album) do %>
           <div class="pic-img-content">
             <%= image_tag album.image, class: "pic-img" if album.image.attached? %>
           </div>
           <div class="pic-info">
             <div class="pic-title">
               <p><%= album.created_at %></p>
               <h3><%= album.title %></h3>
             </div>
             <div class="pic-text">
               <div class="text-box">
                 <p><%= album.text %></p>
               <div>
             </div>
           </div>
         <% end %>
       </li>
     <% end %>

試しに用意していたものが表示されました！！

まとめ

少し時間がかかりましたが無事に実装できました。

次回はもう少し早く少し違ったものもできるようにしたいです。

[Rails]検索機能を実装する

はじめに

実装

routes

controller

models

views

まとめ