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

# はじめに

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


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


# 実装

## routes 

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

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

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

[Rails関連のことを調べてみた：routes.rbのcollectionとmemberについて詳しく学習](https://factor.xseed.link/2020/06/10/post-5545/#outline__3_0_5)

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

[Railsのルーティングを学ぼう②](https://diveintocode.jp/blogs/Technology/Routing2)

[railsガイド](https://railsguides.jp/routing.html)

```ruby:config/routes.rb

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

```

## controller

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

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

```ruby:controllers/albums_controller.rb

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

```

## models


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

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

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

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

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



[[MySQL]データ検索をする](https://qiita.com/sumiiii/items/08a4fa5bd5caeb4f1e2f)

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

[pikawaka:【Rails】whereメソッドを使って欲しいデータの取得をしよう！](https://pikawaka.com/rails/where)
<br>

```ruby: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」と記述します。

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


[![Image from Gyazo](https://i.gyazo.com/c2a83c1126a6a1e300394a903af812d5.png)](https://gyazo.com/c2a83c1126a6a1e300394a903af812d5)


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

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

　　　　　whereメソッドで検索して

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



```html: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の部分は省略していますがお好みで装飾します。

[![Image from Gyazo](https://i.gyazo.com/df882009a2a132ee52745ec0bcba32e2.png)](https://gyazo.com/df882009a2a132ee52745ec0bcba32e2)



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

```html: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 %>

```

<br>
試しに用意していたものが表示されました！！:trophy:

[![Image from Gyazo](https://i.gyazo.com/4be5158d6e9b9d49311db8465db61210.jpg)](https://gyazo.com/4be5158d6e9b9d49311db8465db61210)


# まとめ


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

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