【HELP!泣】動的セレクトボックスから検索し、投稿一覧が表示されるように実装したい

Question

前提・実現したいこと

**動的なセレクトボックスで作成した値を取得し、投稿したpostを検索したい
※動的なセレクトボックスは実装できたのですが、そこから投稿を検索させることができない状態です。

**現在個人アプリを開発中です。

アプリのコンセプトは、スノボー版インスタグラムです。

スノボーのセレクトボックスで選択した内容をもとに投稿一覧を表示させたいです。

■セレクトボックスの内容を選択し、チェックするを押すと、セレクトボックスで選択した内容の投稿一覧が表示されるようにしたい。

searchアクションにどう記述すればいいのか、現段階で頭を悩ませているので、コントローラーなどにどんな記述をすればいいのか、それ以外にもどんなコードを書けばいいのかわからないので、どなたかわかる方ご教示お願いいたします。

ちなみに現在のセレクトボックスの該当ソースコードは以下となります。

      .home-snowB-search__comboBox
        .home-snowB-search__comboBox__snowBselect
          %label.seachBox-listname snowBを選ぶ
          %select.selectBoxLists{id: "parent", name: "snowB"}
            %option{value: "", class: "msg"} snowBを選択
            %option{value: "snowboard"} ボード
            %option{value: "snowboots"} ブーツ
            %option{value: "binding"} ビンディング
        %br
        %p.synergy ✖️
       
        .home-snowB-search__comboBox__brand
          %label.seachBox-listname ブランド
          %select.selectBoxLists{name: "ブランド", id: "children"}
            %option ブランドを選択
            -# スノーボードのブランド
            %option{value: "Burton", "data-val": 'snowboard'} BURTON
            %option{value: "K2", "data-val": 'snowboard'} K2
            %option{value: "Burton", "data-val": 'snowboard'} SALOMON
            -# ブーツのブランド
            %option{value: "Burton", "data-val": 'snowboots'} BURTON
            %option{value: "DEELUXE", "data-val": 'snowboots'} DEELUXE
            %option{value: "FLUX", "data-val": 'snowboots'} FLUX
            -# ビンディングのブランド
            %option{value: "BURTON", "data-val": 'binding'} BURTON
            %option{value: "UNION", "data-val": 'binding'} UNION
            %option{value: "FLUX", "data-val": 'binding'} FLUX

js

$(function() {
  let $children = $('#children');
  let original = $children.html();

  $('#parent').change(function() {
    let val1 = $(this).val();

    $children.html(original).find('option').each(function() {
      let val2 = $(this).data('val');
      if (val1 != val2) {
        $(this).not('.msg').remove();
      }
    });

    if ($(this).val() === '') {
      $children.attr('disabled', 'disabled');
    } else {
      $children.removeAttr('disabled');
    }

  });
});

Comments

[退会済みユーザー]

`searchアクション`とは何でしょうか？「チェックする」ボタンのクリックイベントハンドラのことですか？それとも`search`というアクションがサーバーのコントローラにあるのでしょうか？

[susume]

searchアクションについて、コントローラーにdef searchと定義して、"チェックする"を押すと,投稿一覧が検索できるように実装することを指しています。

私的には、チェックするを押すと選択したカテゴリーの投稿一覧が取り出せればいいので、jsでクリックイベントが発火するのでもいいです。

どう記述すればいいのか、コードが全く進まず、困り果てています...

それと、動的セレクトボックスのカテゴリーとブランドについて、現在select,optionタグを使っていますが、form_withとかに書き換えた方がいいのでしょうか？

[退会済みユーザー]

回答を追加しました。
select,optionタグについてですが、基本的な考え方として、フレームワークにヘルパーメソッドが存在するならHTML直書きよりもヘルパーメソッドを利用するべきです。多くの場合その方が簡潔に書けたり、セキュリティについても考慮されていることが多かったりとメリットがあります。
ただ、全てのヘルパーメソッドが全てのユースケースに対応しているわけではないので、必ずしも置き換え可能というわけではないです。また、UIが変わるわけでもないのでおそらく体感的なメリットはあまりないかと思われます。個人開発であれば置き換え作業は優先順位としては低くても問題ないと思います。

[susume]

ご回答ありがとうございます。

個人アプリではタグでも大丈夫とのことで、書き換えの必要がなくなり安心しました。
また別件なんですが、投稿検索する前に、投稿にカテゴリー機能つけていなかったので、現在実装しています。

そこで問題になっているのが、
https://teratail.com/questions/287126#reply-407380

こちらになります。

別の質問で申し訳ないんですが、こちらの問題に時間使ってしまっているので、解決できそうでしょうか？

Answer 1

３つの select box 全体を form で囲む。
その中に submit で「チェックする」を入れる、

というごく当たり前の実装で動きませんか？

Comments

[susume]

formで全て囲むように一度実装してみますね！ありがとうございます。

それと別件で、投稿にそもそもカテゴリー機能をつけていなかったので、現在実装中です。

そこで以下のようなoptionsタグのhamlの書き方について困っています。
https://teratail.com/questions/287126#reply-407380

もしお時間があればで良いので、解決方法をご教示いただきたく。

Answer 2

コントローラに投稿一覧の機能が既に定義されているのであれば、winterboumさんの回答の通り（当たり前の実装かどうかはさておき）、formタグにフォーム全体を入れてしまうのが簡単かと思われます。

実装については以下のURLが参考になると思います。

• 初めてのフォーム - ウェブ開発を学ぶ | MDN

• Action Controller の概要 - Railsガイド

Answer 3

何らかのタイミングでsearchアクションに飛ばしwhere句で絞り込みブランドのオプションにする。
1.ボードの横に検索ボタンをつけてsearchアクションを実行する
2.javascriptでボードのセレクトの要素が変更するタイミングでseacrhアクションを実行する

この2パターンが僕が思いついた実装方法です。ちなみに前者の方が簡単です。

Comments

[susume]

ご返信遅れまして申し訳ございません。
やはり、現状実現したいのは、動的セレクトボックスで内容を選択し、最後にチェックするを押すと投稿一覧が表示されるようにしたいです。

恐れ入りますが、どんな感じでsearchアクションを飛ばせばいいのか1週間考えてみても分からなかったのでご教示いただけないでしょうか？

[nasuk47]

検索したい箇所の横にリンクを設置してそのリンクをクリックするとsearchアクションを飛ばすという実装です。
formのsubmitみたいな感じです。

``まずリンクを設置してsearchアクションに飛ぶようにする実装をしてみましょう``

そんなに悩みこまずにどんどん質問してください。1日考えれば十分です。

[susume]

セレクトボックスごとに検索リンクつけるやり方ですと、ちょっと見栄えが悪いのかなという感じなので、できれば、上記の質問にあるように、動的セレクトボックスの親カテゴリーとブランドを選択し、チェックするを押すと投稿一覧が表示されるように実装したいです。

この場合ですと、やはり難易度がかなり跳ね上がるから、nasukさんのやり方が好ましいって感じでしょうか？

[nasuk47]

ですね。
まず機能としてそこから見栄えにこだわった方がいいと思います。