2 flat logo on transparent 256
2019-03-09
2019-03-09

Ransackとajax で検索結果を動的に表示する|Ruby on Rails5

2019 03 09 pexels photo 1181258

Ruby on Railsで検索機能を実装する|ransackではRuby on RailsのGem ransackを利用して検索フォームを実装する方法を公開しました。

今回はransackとajaxを利用して検索フォームに入力した内容をリアルタイムで表示する方法を公開します。

動作イメージ

gemをインストールする

gem 'ransack' 

ルートパス

Rails.application.routes.draw do
  resources :dashboards
end

Controllerを設定する

設定ファイルパス

controllers/dashboards_controller.rb

Controllerコード

class DashboardsController < ApplicationController
  def index
    @query = Article.ransack(params[:q])
    @articles = @query.result.by_publish_time_desc

    if params[:q].present?
      render json:  @articles.select("title").map { |e| e.title  }.to_json
    end
  end
end

Controllerのコード解説

ransackはModel名.ransack(params[:q])で値を検索します。

今回は検索結果と初期値を記事が登録された日時順で表示したいので、Modelで予めscopeメソッド(bypublishtime_desc)を作成しています。詳細は Ruby on Railsのscopeメソッドで検索を効率化するを御覧ください

検索フォームタイトルを検索した際に値をjsonで値を返すようにするため、以下のように設定を行っています。

    if params[:q].present?
      render json:  @articles.select("title").map { |e| e.title  }.to_json
    end

フォームを設定する

フォームパス

views/dashboards/index.html.slim

以下viewはslimで設定しています 詳細は【初心者・独学者向け】Ruby On Railsのviewを劇的に変える?!Slim入門

フォームと検索ページのコード

= search_form_for @query, remote: true, id: "search_form", url: dashboards_path do |f|
  div class="form-group"
    = f.text_field :title_or_content_cont, class: "form-control"
  div class="actions"
    = f.submit "Search"

  table.m-t-30
    tr
      th = "タイトル"
    tbody#search_check
      - @articles.each do |article|
        tr
          td
            = link_to edit_dashboard_path(article.id), class: 'text-link' do
              = article.title
coffee:
  $ ->
    $("#search_form").keyup ->
      $("#search_form").find("input[type='submit']").click()
    $('#search_form').on 'ajax:success', (event, results) ->
      $select = $("#search_check")
      $trs = $select.find("tr")
      $trs.each ->
        value=($(this).find("td").first().text())
        if value in results
          $(this).show()
        else
          $(this).hide()

コード解説

検索フォームの部分です 検索結果に入力された情報をajaxで送信するためフォームに remote: trueを設定します

= search_form_for @query, remote: true, id: "search_form", url: dashboards_path do |f|

さらに今回は記事のタイトルと内容に検索項目が入力されている場合は検索結果に表示するため検索項目にtitleorcontent_contを設定します。

 = f.text_field :title_or_content_cont

CoffeeScriptの解説

jQeryのkeyupでフォームが入力された際にイベントを発火させます。

その後にajaxの通信が成功した際に結果をページに反映させます。1列目の(htmlのtr要素)に検索結果を反映させます。

coffee:
  $ ->
    $("#search_form").keyup ->
      $("#search_form").find("input[type='submit']").click()
    $('#search_form').on 'ajax:success', (event, results) ->
      $select = $("#search_check")
      $trs = $select.find("tr")
      $trs.each ->
        value=($(this).find("td").first().text())
        if value in results
          $(this).show()
        else
          $(this).hide()

参考記事

以上になります。

その他関連記事

MySQLでカラム名の変更と上書きする

MySQLでテーブルへカラムを追加するALTER TABLE ~ ADD

MySQLでNULLや空文字を検索する

【初心者・独学者向け】データベースとは何かを解説します

Ruby on Railsでデータベースカラムの追加と削除を行う 

前の記事
次の記事
人気記事
カテゴリーから記事を探す