[楽天][javascript]ショップ内 検索窓にGoogleサジェスト機能を実装[suggest.js]

本日も昨日に続き楽天GOLDページでの検索窓について
普段ネット検索する時に一度は見た事あると思います。

こんなの↓↓↓

これはGoogleサジェストという機能で検索語の入力中に検索候補が表示されるものになります。これを楽天のGOLDページ設置したショップ内検索で使えるように出来ないかなと思い調べてみました。

で、思ったよりもすぐに実際にサジェスト機能のあるショップさんを見つけました。

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

キーワード部分に「健康」と入力したら検索候補が表示されて、そこから選択することが出来ます。

これを参考に調べてみたところ
Enjoy*Studyさんの所でjavascriptのライブラリが公開されているようです。

サンプルを参考に作ってみました。
上記サイトよりsuggest.jsをダウンロードする必要があります。

最初のCSSで入力候補表示の見た目を設定

suggest.jsがサジェスト機能のライブラリファイル
keyword.jsが入力候補に表示するキーワードを設定したファイルになります。
このサンプルではhtmlファイルと同一フォルダに配置として記述してます。

keyword.jsのソース

var list = [
"健康 黒酢等",
"健康飲料・美容ドリンク",
"健康家電 美容家電",
"健康酢 その他",
"健康酢"
];

キーワード候補はショップに合ったキーワードを設定することが出来ます。

こんな感じで表示されるようになりました。

楽天のショップ内検索窓でのサンプルソース

※keyword.jsは文字コードをEUC-JPにしてください。
(文字化けする可能性があります)

ショップ内で扱っている商品名やよく検索されるキーワードを予め設定しておけば、お客さんが検索する際の使い勝手がかなり向上しそうですね。