Last active
June 12, 2018 00:49
-
-
Save softark/5636540 to your computer and use it in GitHub Desktop.
郵便番号検索 jQuery UI Autocomplete
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>郵便番号検索 Autocomplete</title> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/> | |
| <style type="text/css"> | |
| /* フォーム */ | |
| .form { | |
| border: 1px solid #CCCCCC; | |
| margin: 0px 10px; | |
| padding: 10px; | |
| } | |
| .form input { | |
| margin: 0.2em 0 0.2em 0; | |
| } | |
| .form label, form p { | |
| display: block; | |
| } | |
| .form .row { | |
| margin: 0.4em 0; | |
| } | |
| .form .hint { | |
| margin: 0; | |
| padding: 0; | |
| color: #888888; | |
| } | |
| /* Autocomplete のサイズを指定 */ | |
| .ui-autocomplete { | |
| width: 450px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| /* 水平スクロールバーが出ないように */ | |
| overflow-x: hidden; | |
| } | |
| /* 馬鹿の IE-6 にも気を遣ってやる */ | |
| * html .ui-autocomplete { | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="form"> | |
| <div class="row"> | |
| <label for="zipcode">郵便番号</label> | |
| <input id="zipcode" size="8" maxlength="8" type="text" value="" name="zipcode"/> | |
| </div> | |
| <div class="row"> | |
| <label for="address">住所</label> | |
| <input id="address" size="40" maxlength="40" type="text" value="" name="address"/> | |
| </div> | |
| <div class="row"> | |
| <label for="address2">住所２</label> | |
| <input id="address2" size="40" maxlength="40" type="text" value="" name="address2"/> | |
| <p class="hint" id="address_memo"></p> | |
| </div> | |
| <div class="row"> | |
| <label for="biz_name">事業所名</label> | |
| <input id="biz_name" size="40" maxlength="40" type="text" value="" name="biz_name"/> | |
| </div> | |
| <div class="row"> | |
| <label for="town_code">地方公共団体コード</label> | |
| <input id="biz_name" size="8" maxlength="8" type="text" value="" name="biz_name"/> | |
| </div> | |
| <div class="row buttons"> | |
| <input id="clear_btn" name="yt0" type="button" value="クリア"/> | |
| </div> | |
| </div> | |
| <!-- form --> | |
| <script src="https://code.jquery.com/jquery-2.1.4.js"></script> | |
| <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> | |
| <script type="text/javascript"> | |
| jQuery(function ($) { | |
| // フォームのクリア | |
| $('#clear_btn').on('click', function () { | |
| $('#zipcode').val(''); | |
| $('#address').val(''); | |
| $('#address2').val(''); | |
| $('#address_memo').html(''); | |
| $('#biz_name').val(''); | |
| $('#town_code').val(''); | |
| }); | |
| // 検索データ受信時の処理 | |
| function zipDataReceive(response, data) { | |
| response($.map(data, function (item) { | |
| // 住所 | |
| var address = item.pref + item.town + item.block; | |
| // ラベル | |
| var label = item.zip_code + ' : ' + address; | |
| if (item.biz_name) { | |
| label += ' (' + item.biz_name + ')'; | |
| } else if (item.street) { | |
| label += ' (' + item.street + ')'; | |
| } | |
| return { | |
| label: label, | |
| zip_code: item.zip_code, | |
| address: address, | |
| address2: item.biz == 1 ? item.street : '', | |
| address_memo: item.biz == 1 ? '' : item.street, | |
| biz_name: item.biz_name, | |
| town_code: item.town_code | |
| } | |
| })); | |
| } | |
| // フォームの項目を更新 | |
| function zipDataUpdate(ui) { | |
| $('#zipcode').val(ui.item.zip_code); | |
| $('#address').val(ui.item.address); | |
| $('#address2').val(ui.item.address2); | |
| $('#address_memo').html(ui.item.address_memo); | |
| $('#biz_name').val(ui.item.biz_name); | |
| $('#town_code').val(ui.item.town_code); | |
| } | |
| // 郵便番号の入力フィールドに Autocomplete を適用 | |
| $('#zipcode').autocomplete({ | |
| delay: 500, | |
| minLength: 3, | |
| source: function (request, response) { | |
| $.ajax({ | |
| url: 'https://tools.softark.net/zipdata/api/search', | |
| dataType: 'jsonp', | |
| data: { | |
| mode: 0, | |
| term: request.term, | |
| max_rows: 100, | |
| biz_mode: 2, | |
| sort: 0 | |
| }, | |
| success: function (data) { | |
| zipDataReceive(response, data); | |
| } | |
| }); | |
| }, | |
| select: function (event, ui) { | |
| zipDataUpdate(ui); | |
| return false; | |
| } | |
| }); | |
| // 住所の入力フィールドに Autocomplete を適用 | |
| $('#address').autocomplete({ | |
| delay: 300, | |
| minLength: 2, | |
| source: function (request, response) { | |
| $.ajax({ | |
| url: 'https://tools.softark.net/zipdata/api/search', | |
| dataType: 'jsonp', | |
| data: { | |
| mode: 1, | |
| term: request.term, | |
| max_rows: 100, | |
| biz_mode: 2, | |
| sort: 1 | |
| }, | |
| success: function (data) { | |
| zipDataReceive(response, data); | |
| } | |
| }); | |
| }, | |
| select: function (event, ui) { | |
| zipDataUpdate(ui); | |
| return false; | |
| } | |
| }); | |
| // 事業所名の入力フィールドに Autocomplete を適用 | |
| $('#biz_name').autocomplete({ | |
| delay: 300, | |
| minLength: 2, | |
| source: function (request, response) { | |
| $.ajax({ | |
| url: 'https://tools.softark.net/zipdata/api/search', | |
| dataType: 'jsonp', | |
| data: { | |
| mode: 1, | |
| term: request.term, | |
| max_rows: 100, | |
| biz_mode: 1, | |
| sort: 2 | |
| }, | |
| success: function (data) { | |
| response($.map(data, function (item) { | |
| var address = item.pref + item.town + item.block; | |
| return { | |
| label: item.biz_name + ' : ' + address, | |
| zip_code: item.zip_code, | |
| address: address, | |
| address2: item.street, | |
| address_memo: '', | |
| biz_name: item.biz_name, | |
| town_code: item.town_code | |
| }; | |
| })); | |
| } | |
| }); | |
| }, | |
| select: function (event, ui) { | |
| zipDataUpdate(ui); | |
| return false; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
tools.softark.net で公開している郵便番号検索サービスを jQuery UI Autocomplete で使用する例です。
短い HTML ですが、そのままで、ローカルに置いても、動作します。
当該サービスの API 仕様については、https://tools.softark.net/zipdata/api を参照して下さい。