読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Visualforce × 郵便番号検索を試してみました

Visualforce × 郵便番号検索を試してみました。
f:id:tyoshikawa1106:20170129234843p:plain


デモ動画


この郵便番号ですが、「プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法」という本で紹介されていたサンプルの1つを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>