プルダウン選択とキーワード検索を連動させたい

Question

①プルダウンで検索API選択（A、B）後に
②キーワード検索フォームに検索したいワードを入力し
実行ボタンを押すと検索結果に遷移。

例）A選択後⇒キーワード入力　＝Aの検索API＋入力したワードで検索結果が表示される

といったものを作りたいのですが、①②別々には作成出来たのですが
①＋②の結果という連動の仕方がわかりません。。
（アマ〇ンなどで使われている検索フォームみたいなものを作りたく…）

複数の遷移先を切り替える実現方法を教えてください。

<div class="form-select"> 　<FORM name="form"> 　　<select name="selectSample" id="selectSample"　　　　onChange="if(document.form.selectSample.value){location.href=document.form.selectSample.value;}"> 　　　<option value="">選択してください</option> 　　　<option value="Aの検索API">A</option> 　　　<option value="Bの検索API">B</option> 　　</select> 　</FORM> </div>

①は上記の様に、プルダウンで選択すると遷移先に飛ぶ様になっています。

Comments

[x_x]

①ができているならもう完成のように思えるのですが、どこができていないのでしょうか？　①をどう実現したのか書いてもらえますか？

[pokarisuwett]

<div class="form-select">
　<FORM name="form">
　　<select name="selectSample" id="selectSample"　 onChange="if(document.form.selectSample.value){location.href=document.form.selectSample.value;}">
　　　<option value="">選択してください</option>
　　　<option value="Aの検索API">A</option>
　　　<option value="Bの検索API">B</option>
　　</select>
　</FORM>
</div>

[pokarisuwett]

有難う御座います。①は上記の様に、プルダウンで選択すると遷移先に飛ぶ様になっています。

[m.ts10806]

質問は編集できるので適宜追記してください。とくにコードはコメント欄に書くものではなく、マークダウンが利用できる質問本文に追記するものです。

Answer 1

x_xさんの説明を元に分析をします。

画面遷移の見直し

まず、現状だと画面遷移がlocation.href以下となってしまうので、この部分を外してください。

/*onChange="if(document.form.selectSample.value){location.href=document.form.selectSample.value;}"*/

検索値の取得

this.form.actionの値にword=(入力値)を追加します。

api_a = 'Aの検索API';
api_b = 'Bの検索API';
act = this.value === api_a ? api_a : api_b;
searchword = document.form.word.value; //検索値を取得
this.form.action = act + "?word=" + searchword; //検索値を紐付ける

と変えるだけです。

するとthis.form.action の値はこのようになるはずです。

（選択された検索APIのURL)?word=（入力値）

イベントの設定

それからプルダウンを操作した際に、formのactionプロパティの値（遷移先＋検索値）を設定してやります。

document.getElementsByName('api')[0].addEventListener('change', function(event) {
  api_a = 'Aの検索API';
  api_b = 'Bの検索API';
  act = this.value === api_a ? api_a : api_b;
  searchword = document.form.word.value; //検索値を取得
  this.form.action = act + "?word=" + searchword; //検索値を紐付ける
}, false);

ここまでくれば、あとはsubmitするだけです。

Answer 2

サーバー側で分岐したほうがいいとは思いますが、一応

  <form action="hoge">
   <div>
    <select name="api"><option selected="selected">A</option><option>B</option></select>
    <input name="keyword" />
    <input type="submit" />
   </div>
  </form>

document.getElementsByName('api')[0].addEventListener('change', function(event) {
  this.form.action = this.value === 'A' ? 'hoge' : 'foo';
}, false);

Comments

[pokarisuwett]

ご回答ありがとうございます。上記試してみたのですが、検索結果が下記の様になります
https://（現在地のURL）/hoge?api=A&keyword=（入力値）
↓
※固定のapi（action）+（入力値）
※https://（遷移先URL AorB）search?word=（入力値）
という形で結果を表示したいのですが…
JavaScript超初心者ですみません。。

[x_x]

検索フォームが提示されていないためでっちあげただけなので適宜変更してください

[pokarisuwett]

<div id="searchBox">
<form action="https://（遷移先URL AorB）search?word=" target="_blank" accept-charset="UTF-8" onfocus="ga();">
<p class="siteSearch">
<input type="text" name="word" class="searchTextBox" placeholder="作品名検索" size="20" onfocus="ga();">
<span onclick="ga();"><input type="image" src="images.gif" alt="検索" onclick="document.charset='UTF-8';" value="検索" name="searchBtn1" id="searchBtn1" onclick="document.charset='UTF-8';" value="検索" onclick="ga();"></span>
</p>
</form>
</div>

[x_x]

keyword を word にするだけですよね？
ga()の内容が分からないので重要であれば明らかにしてください。
また、コードはここに書かずに質問文に追記するようにしてください。

[FKM]

横から失礼。

x_xさんの説明で間違ってないですよ。まずは以下の三項演算子で、formのactionメソッドの値（遷移先）を決定させます。
api_a = 'Aの検索API';
api_b = 'Bの検索API'
this.form.action = this.value === api_a ? api_a : api_b;
と変えるだけです。

それから、現状だと画面遷移がlocation.href以下となってしまうので、この部分を外してください。
/*onChange="if(document.form.selectSample.value){location.href=document.form.selectSample.value;}"*/

そのかわりに、this.form.actionの値にword=(入力値)を追加します。

api_a = 'Aの検索API';
api_b = 'Bの検索API';
act = this.value === api_a ? api_a : api_b;
searchword = document.form.word.value; //検索値を取得
this.form.action = act + "?work=" + searchword; //検索値を紐付ける
と変えるだけです。

するとthis.form.action の値はこのようになるはずです。

（選択された検索APIのURL)?word=（入力値）

あとはプルダウンが onChangeイベントのときに、値をsubmitするだけです

Answer 3

考え方は２つ

• プルダウンも直接入力も単にパラメータなので両方を同じformでそのまま検索
• プルダウンを選んだ瞬間に専用ページに移動し、そこでキーワードをいれて検索させる