質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

ransack + ajax で検索結果を動的に表示させたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 338

sanezane

score 79

■環境
FW:rails(5.2.3)
言語:ruby(2.6.1)
開発環境:docker(18.09.2)

やりたいこと

ransack + ajaxで記事の検索を動的に表示させたい

ソースコード内でやりたいこと

・application_controlelr.rb
・question_controller.rb
・questions/index.html.slim

・検索フォームに文字が入ったらリクエストを送り、検索結果をjson形式でviewへ渡してviewの表示を並び替える。
※現状のソースをgithubのdevelopブランチへ格納
■ 現状のソースコード
・view側

= search_form_for @search, remote: true, id: "search_form", url: questions_path do |f|
    = f.text_field :title_cont, placeholder: Settings.service.ransack_placeholder, class: 'form-control col mr-sm-2'
    = f.submit class: 'btn btn-success my-2 my-sm-0'
    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()
  table.table.table-striped.table-condensed
    thead.thead-light
      tr
        th[width="10%"]
          | ID
        th[width="15%"]
          | Author
        th[width="50%"]
          | Title
        th[width="25%"]
          | Menuu
    tbody#search_check
      - @questions.each do |question|
        tr
          td[width="10%"]
            = question.id
          td[width="15%"]
            = question.author
          td[width="50%"]
            = link_to question.title, question_path(question)
          td[width="25%"]


・controller側

def set_search
        @search = Question.ransack(params[:q])
        @questions = @search.result.page(params[:page]).per(Settings.service.PER).order('updated_at DESC')

        # ajaxで送られた場合にはjsonを変えす
        unless params[:q].blank?
            render json: @questions.select("title").map { |e| e.title  }.to_json
        end
    end

以下のキャプチャは検索窓にてと入力した時のログが載っています(1枚目)。想定通りのリクエストがいってるのですがviewは何も変わらずです。2枚目はその時のviewの様子です。ご指摘をいただけると幸いです。よろしくお願いいたします。

イメージ説明
イメージ説明

■2019/06/08追記
controllerのblank?の部分を`present?`へ変更したら以下のようになりました。。。7件の質問タイトルを表示する要件なのであってるっちゃ合ってますが。。。jsonのみ!!!
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

jsonの結果を元に表示を制御するだけでは別ページにあるものが探せないのでは?
また1ページの件数やページ総数も検索で変わらないのも変です

検索成功時はページングのバーとtbodyの中身をまるごと書き換えるべきではないでしょうか

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる