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

公開日:  最終更新日:2014/10/13

[楽天][javascript]ショップ内 検索窓にGoogleサジェスト機能を実装
本日も昨日に続き楽天GOLDページでの検索窓について
普段ネット検索する時に一度は見た事あると思います。

こんなの↓↓↓
27-1.png

スポンサードリンク

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

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

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

キーワード部分に「健康」と入力したら検索候補が表示されて、そこから選択することが出来ます。
27-2.png
これを参考に調べてみたところ
Enjoy*Studyさんの所でjavascriptのライブラリが公開されているようです。

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






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

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

keyword.jsのソース

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

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

こんな感じで表示されるようになりました。
27-3.png
楽天のショップ内検索窓でのサンプルソース





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

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




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑