[楽天]ショップ内 検索窓 javascriptを使ってコンボボックスとの連動

先日に引き続きショップ内検索窓についてです。

Javascriptと組み合わせたサンプルを紹介します。

楽天のショップ内検索をコンボボックスと連動させる方法

楽天内でも有名なこちらのショップ 爽快ドラッグ
ショップオブザイヤー2012で総合1位を受賞しているショップになります。

こちらのショップを参考に検索窓についてサンプル作成してみました。
動きとしては コンボボックスでよく入力されるキーワード、入力してほしいキーワードさらに、価格帯の選択が出来るようになっています。

 


セール品
限定品
送料無料
～999円以下
1000～1999円以下
2000～2999円以下
3000～3999円以下
4000～5999円以下

 






  

サンプル(実際に検索は出来ません)

セレクトボックスで選択された内容に応じて
その後の検索ページに飛ばす条件をjavascriptで制御しています。

セール品、限定品の場合は 隣にあるキーワード用テキストボックスに選択した内容をセット

送料無料（サンプルソースでは5000円以上が送料無料とします)の場合は minの値に5000をセット

価格帯 選択した価格帯に応じたmin,maxの値をセットしています。
(min,maxの項目についはhidden 隠し項目になっています)

価格などの項目を別に分けてレイアウトすれば良いかもしれませんが、スペースが限られている場合や、入力の手間削減、人気キーワードを予め表示など使い勝手が良い検索窓になっている気がします。