![[API/マッシュアップ]都道府県→市町村のドリルダウン検索 | Wood-Roots:blog](https://wood-roots.com/wp-content/themes/wr2/img/logo.svg){kind=logo}
以前に都道府県→路線→駅というドリルダウン検索を実装する方法を紹介しましたが、同様にAPIを使って都道府県→市のドリルダウン検索を実装するスクリプトを紹介します。
スクリプトの基本構造はほぼ同じです。
今回はYahoo!の住所ディレクトリAPIを使用しています。
以下のコードでは市（都道府県の1階層下とみなされるエリア・・という解釈でいいでしょうか）までで止めていますが、市の住所コードをAPIに投げると町名まで取得することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
//市町村検索 //初期設定 var area_pref = $('#area_pref'); //都道府県が入るselect var area_city = $('#area_city'); //市町村が入るselect //最初に都道府県を読み込む $.getJSON('http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/addressDirectory?callback=?', { appid: 'あなたのアプリケーションID', ac: 'JP', output: 'json' }, function(json){ area_pref.children().not(':first').remove();//一つ目のoption(選択してください）のみ残して削除 $.each(json.Feature[0].Property.AddressDirectory,function(key,value){ var txt = String(this.Name); var code = String(this.AreaCode); area_pref.append('<option value="'+code+'">'+txt+"</option>"); }); }); //都道府県から市町村を検索 area_pref.on('change',function(){ $.getJSON('http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/addressDirectory?callback=?', { appid: 'あなたのアプリケーションID', ac: area_pref.val(), output: 'json' }, function(json){ area_city.children().not(':first').remove();//一つ目のoption(選択してください）のみ残して削除 $.each(json.Feature[0].Property.AddressDirectory,function(key,value){ var txt = String(this.Name); area_city.append('<option value="'+txt+'">'+txt+"</option>"); }); }); }); |
HTMLで重要なのはselectのID名だけで、ほかはどんなかたちでもかまいません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="module"> <h2>地域から探す</h2> <dl class="table"> <dt>都道府県</dt> <dd> <select id="area_pref"> <option value="">都道府県を選択してください</option> </select> </dd> </dl> <dl class="table"> <dt>市町村</dt> <dd> <select id="area_city"> <option value="">市町村を選択してください</option> </select> </dd> </dl> </div> |
この住所検索と路線検索を組み合わせることで、全国規模のポータルサイト・データベースサイトなどでも楽に検索機能を実装することが可能となります。
いずれもAPIの利用規約を順守してご利用ください。
AD
Commentsコメント