複数のキーワードを結合して検索したい。

Makeshopのクリエイターモードで、ECサイト制作をしている者です。

検索窓の部分で、javascript を使って絞り込み検索を実現したいのですが、
プログラムについては初心者のためうまくいきません。

具体的には、下記のような「キーワード入力」「プルダウン選択」をHTMLで設置しておいて、それぞれの配列を一つに結合して、その値を「検索キーワード」として検索結果を出したいのです。

たとえば、「プラチナ」とキーワード入力 + 「ダイヤモンド」をプルダウン選択して、「プラチナダイヤモンド」みたいな形でキーワード検索する形になります。

  <section class="side-section side-section-search">
        <ul class="side-search">

              <li><label>キーワード入力</label>
                 <input list="datalist-word" type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>">
              </li>

              <li><label>プルダウン選択</label>
                 <select list="stone" id="stone" name="stone">　　// ← ここら辺が素人なので不完全です。
                    <option value="ダイヤモンド">	ダイヤモンド</option>
                    <option value="ルビー">		ルビー</option>
                    <option value="サファイア">		サファイア</option>
                 </select>
              </li>

           </ul>
           <a href="<{$search_form.search_url}>" class="btn side-search-btn">検索する</a>
        </ul>
  </section>

試行錯誤してみたのですが、うまくいきません。
お分かりの方がいらっしゃいましたら、教えていただけないでしょうか？

Makeshopのサンプルサイトですが、左サイドにある検索フォームを流用しています。
http://tplbrothers.shop20.makeshop.jp/

m.ts10806

2022/01/25 11:03

＞試行錯誤してみたのですが、うまくいきませんそのうまくいかないコードを提示されたほうが良いかと思います。あと、その検索データってどこにあるものなのでしょうか。現状だと他者が再現できないような。

Mania

2022/01/25 13:39

アドバイスいただき、ありがとうございます。まったくの100％素人のWEBデザイナーなので、適当にネットから情報をかき集めて、あてずっぽうを書いて試行錯誤しているだけなので、コードを書いても意味がないかなと…。 Makeshopのサンプルサイトですが、左サイドにある検索フォームを流用しています。 http://tplbrothers.shop20.makeshop.jp/

m.ts10806

2022/01/25 20:34

>あてずっぽうを書いて試行錯誤しているだけなので、コードを書いても意味がないかなと…。いえ、現状だとただの作業依頼です。自身が「やってみたこと」があるのでしたらコードの提示は必須かと。 https://teratail.com/help/question-tips#questionTips35 試行錯誤したのでしたら尚更ですね。書いた人や書いた内容がどうというのは関係ないです。その内容も回答者にはアドバイスのためのヒントになります。それに先に書きましたが、「検索したデータを表示」ならその「おおもとのデータ」の場所がどこにあるか分かってないと他者が再現できませんので。 Makeshoptとやらが必要だと環境構築などの観点から回答得られにくいかもしれません。なので、ご自身がやってみたことと、実際に起きている問題を具体的に書かれたことが尚更必要なのです。

Mania

2022/01/25 23:18

いや、本気で基礎の基礎から分かってないのです。例えるなら、英語とフランス語の区別もつかないようなレベルです。ネット情報を見ていても、値を取得するのも代入するのも、まったく別の方法が複数あるように思えて、どれとどれを組み合わせれば良いのかもわからない状態なので、ここでコードを披露する意味がないと思います。

Mania

2022/01/25 23:52

おそらく、もっとも単純な部類に入るもので、 5行くらいで済むようなものだとは思うのですが……。・1.　「テキスト」「プルダウン」の値をそれぞれ取得する。・2.　取得した値を結合して、「キーワードA　キーワードB」の形にする。・3.　結合した値を戻してやる？　　return？

m.ts10806

2022/01/26 03:33

でしたら質問以前の問題で、作業依頼にしかなってないのでクラウドワークスなど業者に依頼してください。理由は先に書いたとおり。（作業依頼にしてもこれだけでは私に近い内容をヒアリングされます）

Mania

2022/01/26 07:23

まさしく、この件も含めてサイト制作をクラウドワークスに依頼したら、振り込め詐欺に遭いそうになったので、自分でやらなければならなくなったわけです。前回はバックレで、今回は詐欺。いづれも運営は動かない。正直、クラウドワークスを利用しようとは、二度と思えないです。

m.ts10806

2022/01/26 09:01

クラウドワークスはあくまで例ですよ。「作業依頼であって質問ではない」というところから脱した内容にしない限りどこの質問サイト使っても同じです。そもそもがMakeshopというサービス（調べた感じ有償の）を利用されている時点で他者に手を出すのは難しい上に、自身が書いてみたことを出さない意味がないと拒否し続けるわけですから。 Makeshopの運営はGMOのようですから、そっちのサポートなり何なりに依頼したほうが良いのでは。

Mania

2022/01/26 10:39

ですから拒否じゃなくて、そもそも「全く分からない」と申し上げているのに、出せ・出せと言われても困ります。ニーハオ以外に中国語が話せない人に、文章を書いてみろと言うのと一緒です。勝手に作業依頼とか決めつけられるのであれば、これ以上は返答されなくても結構です。普通に質問しているのですから、どういう考え方をすればいいのか指摘したり、参考サイトがあれば教えれば良いと思うのですが、間違ってますかね？自分がHTML やCSSの質問を見たら、そうしていますけど……。