Visualforce × 郵便番号検索を試してみました。
デモ動画
この郵便番号ですが、「プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法」という本で紹介されていたサンプルの１つをVisualforce用にカスタマイズしたものです。
jQueryとYubinBangoというライブラリを利用して作られています。
短時間で検索でき、対象によっては建物名と階数まで取得できました。郵便番号検索はいろいろな場面で役立つ機能だと思います。
サンプルコード
追記
住所項目が複数あるときのバージョンです。
<apex:page showHeader="true" sidebar="true">
<apex:slds rendered="true" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<style>
.postal-code-input {
width: 200px !important;
}
</style>
<div class="slds">
<div class="slds-m-bottom--large">
<div >
<section class="slds-box slds-m-around--small">
<div>
<form id="vf-form">
<div>
<label>Postal code</label>
<div>
<input type="text" class="slds-input postal-code-input focus zip" name="zip" placeholder="1007012" />
</div>
<label>State</label>
<div>
<input type="text" class="slds-input focus state" name="state" />
</div>
<label>City</label>
<div>
<input type="text" class="slds-input focus city" name="city" />
</div>
<label>Street</label>
<div>
<input type="text" class="slds-input focus street" name="street" />
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
<script>
$(function () {
//ajaxzip3の設定
$('body').on('keyup','#vf-form .zip',function() {
AjaxZip3.zip2addr('zip','','state','city','street');
});
});
</script>
</apex:page>
