7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Ruby on Rails】タグ検索機能を実装してみた

Last updated at Posted at 2020-03-16

#はじめに
今回は前回追加した、タグ付機能を利用してタグ検索機能を追加します。
前回の記事(タグ付機能)
https://qiita.com/E6YOteYPzmFGfOD/items/bfffe8c3b31555acd51d

###作るもの
マイクロポストタグ付機能を利用したタグ検索機能。(題材は自分のポートフォリオです。)

###対象読者
railsチュートリアルに機能を追加したい等自分と同じ位のレベルの人を対象としています。

#作成の流れ
1.検索フォームの作成
2.コントローラーのアクション作成

#1.検索フォームの作成
今回は検索フォームをroot_path上に設けます。(自分のポートフォリオがマイクロポストの一覧をroot_path(static_pages/home)に設けているため)

app/views/static_pages/home
<%= form_with url: root_path, method: :get, class: '自由に' do %>
  <%= select_tag :tag_id,
    options_from_collection_for_select(Tag.all, :id, :name, params[:tag_id]),
    {
      prompt: 'タグで絞り込み',
      class: ,'自由に'
      onchange: 'submit(this.form);'
    }%>
<% end %>

fomr_withを使って検索フォームを作ります。各指定している値を自分なりに説明します。

url: 検索した後に移動するページ。(getメソッド後の移動するページ)
method::get  検索時はゲットメソッドを使用する。(root_urlにゲットアクションを起こすのでstatic_page_contorollerのhomeアクションに飛びます。

select_tag: フォームの中でセレクトタグを表示するためのメゾット
select_tag:オブジェクト名(tag_id)URLのクエリ(検索するとURLの?以降に表示されてます)
options_from_collection_for_select(
第1引数:オブジェクトのリスト(Tag.all全件表示)
第2,3引数:取得したリストの表示。順番が大切でid,nameの順にすることによりタグnameを表示する。(idを基準に表示する。逆の順番にするとidの数字だけが表示される。)
第4引数:検索後に表示する値。params[:tag_id]とすることによりURLのクエリからidを取得して検索後もフォームにタグ名を表示します。(第2、第3の引数の値が重要です。)

{promt:は何も選択していないときに表示される値です。
onchange:submit(this.form)はJavaScriptを実行できるものでセレクトボックスが選択されたときにこの検索がスタートするようにしています。
}

続いてコントローラーです。

app/controllers/static_pages_controller.rb
@microposts = params[:tag_id].present? ? Tag.find(params[:tag_id]).microposts : Micropost.all
※ページネーション等に渡してください

タグ検索が実行されるとparamsでURLのクエリ(tag_id)を取得してfindでテーブルの中を探し関連付けしているのでmicropostsで関連するマイクロポストを取得します。検索されていない場合は全てのマイクロポストを取得するようにしています。

#おまけ
URLのクエリとはURL上に表示されている?以降のやつです。
なんちゃら.com/?utf8=✓&tag_id=1
paramsメゾットではgetメゾット時にURLのクエリを取得できます!
※ログを見るとこんな記述もあります。
Parameters: {"utf8"=>"✓", "tag_id"=>"2"}

以上でタグ検索機能は完成となります。最後までお読みいただきありがとうございました。
アドバイス等いただけるととても喜びます。次はマイクロポストの検索機能を記事にしたいと思います。
ありがとうございました。

7
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?