料理選択 プルダウン

ホットペッパー - HotPepper.UI.Food.Pulldown - by Recruit Web Service UI Library

概要

ホットペッパー グルメサーチAPI に検索クエリ「料理」パラメータを渡す事で「鍋料理」「寿司」「沖縄料理」等といった、料理の種類による絞込みができます。これは、その料理を選択する為のプルダウンUIを簡単に生成するためのモジュールです。

グルメサーチAPIでは検索クエリ「料理」を最大5つまで指定することができますが、このプルダウンはあえて1つだけをユーザに選んでもらう事を想定したUIになっています。

読み込まれる毎に1度だけ、APIから必要な情報を動的に取得して選択肢を生成する為、マスタ更新などのメンテナンスを気にする事無く手軽に利用できます。

>BACK TO TOP

サンプル

>BACK TO TOP

動作条件

>BACK TO TOP

簡易なコード例

コピペする事で手軽に再利用が可能なコード例はこちら

>BACK TO TOP

使い方

下記のように必要なファイルを読み込んだうえで...

<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-food-sel"></select>

* name属性を設定せずとも、自動で name="food" が付与されます。

最後にこのようなjavascriptコードを書くことでプルダウンが自動生成されます。

Recruit.UI.key = 'ご自身のAPIキー';
new HotPepper.UI.Food.Pulldown();

jQueryを使って、ページ表示と同時にプルダウン生成したい場合はこちら:

$( function(){
    Recruit.UI.key = 'ご自身のAPIキー';
    new HotPepper.UI.Food.Pulldown();
});

ご自身のAPIキーをお持ちでない方はこちらの画面からリクルートWEBサービスに登録する事で取得する事ができます。

>BACK TO TOP

オプション機能

利用可能なオプション機能についてはこちらの記述を参照してください。

>BACK TO TOP

本コンテンツはリクルートが提供する実験サービスです

メディアテクノロジーラボ