0
0

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.

検索機能の実装(form_tag・ransack)

Posted at

#検索機能の実装
form_tagとransackをそれぞれ用いた2種類の検索機能の実装を行いました。
特にこだわりがなければransackを用いたほうが簡単に実装できると感じました。

##form_tagを用いた検索機能の実装

タスク一覧が表示されるtasks#indexページに、検索フォームを実装しました。
検索フォームに入力されたキーワードがデーターベースにあるタスク名と部分一致した場合、そのタスクを表示されるようにしました。
(html.slim, bootstrapを用いました。)

views/tasks/index.html.slim
h1 タスク一覧

= link_to '新規登録', new_task_path, class: 'btn btn-primary'

= form_with :method => "get", local: true do |f|
  .form-group
    = f.submit "Search", :name => nil ,class: "btn btn-outline-primary"
    = f.text_field :search
    
.mb-3
table.table.table-hover
  thead.thead-default
    tr
      th= '名称'
      th= '詳細'
  tbody
    - @tasks.each do |task|
      tr
        td= task.name
        td= task.description
        td= task.created_at

検索フォームで入力されたキーワードが引数としてparamsの中に入るように、
taskscontrollerのindexにsearch(params[:search])を追加しました。

controllers/tasks_controller.rb
def index
    @tasks = Task.search(params[:search])
end

最後にtaskモデルにsearchというメソッドを作成しました。
検索フォームで入力されたキーワードがsearchメソッドの中で処理され、
キーワードと部分一致するタスクがあれば、その結果がページに表示されます。
部分一致するタスク名がない場合は、allとして全てのタスクが一覧として表示されます。

models/task.rb
class Task < ApplicationRecord
  def self.search(search)
    if search
      where(["name LIKE ?", "%#{search}%"])
    else
      all
    end
  end
end

##ransackを用いた検索機能の実装

簡単なタスクアプリの一覧ページに実装しました。
(html.slim, bootstrapを用いました。)

Gemfileにransackを追加し、ターミナルでbundle installしました。

Gemfile
gem 'ransack' #1番下でOK

検索に引っかかったタスクのみ表示するため、
indexメソッドを以下に書き換えました。

controllers/tasks_controller.rb
def index
  @q = User.ransack(params[:q])
  @users = @q.result(distinct: true)
end

indexのviewsを書き換えました。

views/tasks/index.html.slim
= search_form_for @q, class: 'mb-5' do |f|
  .form-group.row
    = f.label :name_cont, '名称', class: 'col-sm-2 col-form-label'
    .col-sm-10
      = f.search_field :name_cont, class: 'form-control'
  .form-group
    = f.submit class: 'btn btn-outline-primary'

また、ransackにはソート機能もあるため、並べ替えも行いたい場合はransackをお勧めします。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?