ホットペッパー - HotPepper.UI.Genre.Pulldown - by Recruit Web Service UI Library
ホットペッパー グルメサーチAPI に検索クエリ「ジャンル」パラメータを渡す事で「居酒屋」「中華」「ラーメン」等といった、お店のジャンルによる絞込みができます。これは、そのジャンルを選択する為のプルダウンUIを簡単に生成するためのモジュールです。
グルメサーチAPIでは検索クエリ「ジャンル」を最大3つまで指定することができますが、このプルダウンはあえて1つだけをユーザに選んでもらう事を想定したUIです。
読み込まれる毎に1度だけ、APIから必要な情報を動的に取得して選択肢を生成する為、マスタ更新などのメンテナンスを気にする事無く手軽に利用できます。
コピペする事で手軽に再利用が可能なコード例はこちら
下記のように必要なファイルを読み込んだうえで...
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="recruit.ui.js"></script> <script type="text/javascript" src="hotpepper.ui.js"></script>
プルダウンを表示させたい場所にこのようなHTMLを書き...
<select id="hpp-genre-sel"></select>
* name属性を設定せずとも、自動で name="genre" が付与されます。
最後にこのようなjavascriptコードを書くことでプルダウンが自動生成されます。
Recruit.UI.key = 'ご自身のAPIキー'; new HotPepper.UI.Genre.Pulldown();
jQueryを使って、ページ表示と同時にプルダウン生成したい場合はこちら:
$( function(){ Recruit.UI.key = 'ご自身のAPIキー'; new HotPepper.UI.Genre.Pulldown(); });
ご自身のAPIキーをお持ちでない方はこちらの画面からリクルートWEBサービスに登録する事で取得する事ができます。