gem無し シンプルな検索機能 ECサイト

検索機能実装

以前、ユーザーと本の投稿という検索対象が選べ、
かつ、部分一致、完全一致等、検索方法も選べる　検索機能を実装しましたが、、
今回は、それよりもっと簡単なECサイトでの商品名検索機能です。（部分一致のみ！）

もっと複雑な検索機能の実装は以下の記事↓↓

完成イメージ

コントローラー作成

通常は、

rails g controller searches

今回私はnamespace使ってるので、、

rails g controller public/searches

ルーティング

 scope module: :public do
     root to: 'items#top'
     get '/search', to: 'searches#search'. ＃ここです！！

view 検索フォームの表示のところ

<div class="serch_form">
    <%= form_with url: search_path,method: :get, local: true do |f| %>
    <%= f.text_field :content,placeholder:"商品名を検索"%>
    <%= f.submit'検索'%>
    <% end %>
</div>

前回もっと複雑な検索機能を作ってるので、この辺りはサクサク理解できました。
ユーザーの入力した検索ワードをtext_fieldでcontentして受け取っています。
そしてそれを、コントローラーへわたします

コントローラー記述

class Public::SearchesController < ApplicationController
    
    def search
    @content=params[:content]
    @records=Item.search_for(@content)
    
    end
    
end

params[:content]で、検索ワードを受けとり@contentに入れています。
そして、Item.search_for(@content)の値を@recordsへ入れています。
このItem.search_forはどこにあるかというと・・・・

item.rb

def self.search_for(content)
        Item.where('name LIKE ?', '%'+content+'%')
    end

検索対象であるItemモデルに書いてあります。
where~以降のところは部分一致で検索するよう定義しています。

View　検索結果を表示

<div class="container">
<div class="row" style="margin-top:40px;">
<div class="col-9 offset-1">
<h3 style="display:inline">検索結果</h3> 
<h6 style="display:inline;">(全<%= @records.count %>件)</h6>
<% if @records.empty? %>
  <div class="text-center" style="margin:30px;">
  <p style="color:red;">該当する商品はありません</p></div>
<% end %>

<div class="d-flex flex-row flex-wrap">
<% @records.each do |data| %>
<div class="item-image col-3" style="margin:30px 0;">
    <%= link_to item_path(data.id) do %>
    <%= attachment_image_tag data, :image, format: 'jpeg', fallback: "no_image.jpg",size:"200x200" %>
    <% end %><br>
    <%=  data.name %><br>
    ￥<%= data.taxin_price.round.to_s(:delimited) %>
</div>
<% end %>
</div>

終わり

検索機能のリファクタリング

コードをよりコンパクトにしました。