フォームに郵便番号検索機能を実装する方法

今回はフォームに郵便番号検索機能を実装する方法をここに書き留めていきたいと思います！

フォームの入力機能など普段使用する際に、郵便番号を入力すると住所の番地の手前まで検索することができる機能があると思います。

今回はその郵便番号検索機能をjsを用いて実装する方法を記載したいと思います。

HTMLファイル実装

まずは、検索画面の実装を行います。

簡単なデザインとしてBootstrap4.5を用いて次のように記述します。

index.html

            <div class="box-radius col-6">
                <form>
                    <label for="formGroupExampleInput">郵便番号を入力してください</label>
                    <div class="row">
                        <input type="text" class="form-control col-5" id="inputpostcode" placeholder="postcode">
                        <button type="button" id="clear" class="btn btn-secondary col-3">クリア</button>
                        <button type="button" id="search" class="btn btn-primary col-3">検索</button>
                    </div>
                    <div class="form-group">
                        <label for="formGroupExampleInput2">住所</label>
                        <input type="text" class="form-control" id="receiveaddress" placeholder="address">
                    </div>
                </form>
            <div>

ここでは簡単なBootstrapのクラスを用いただけですので、空白やフォームのサイズの調整などは個人のお好みでお願いします。

JavaScriptファイル実装

次にJsファイルを書いていきます。

なぜ、Bootstrapの最新版は5.3にも関わらず、4.5を用いたのかというと、v5.3ではjQueryの対応をしていないからです。つまりここではjQueryを用いて実装を行います。

実際今回の範囲の実装であればjQueryを用いていようがいまいがあまり変わらないのですが、個人制作をしていた時にバンバンjQueryを使っていたのでこのような仕様になってしまいました。

main.js

$(function(){
    $('#search').on('click', function() {//検索ボタンがクリックされた時

        $.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
            {
            zipcode: $('#inputpostcode').val()
            }
        )
        .done(function(data) {
            if (!data.results) {
                var notaddress = [];
                alert("該当する郵便番号がありません。");
                $(".alart-text2").html(notaddress.join("<br />"));
            } else {
                let result = data.results[0];
                $('#receiveaddress').val("〒" + result.address1+result.address2+result.address3);
            }
        })
    });
});

このようにコードを作成します。

ここで、1点住所の情報の拾ってくる方法を記載いたいと思います。

住所のデータは、result.address1に県名、result.address2に市区名、rerult.address3に町名が格納されています。

そのため、フォームの仕様によって変更して利用する必要があります。

いかがだったでしょうか？フォーム制作などエンジニアには必要な実装の一つに関してお話させていただきました！

以上で今回の内容は終わりとさせていただきます。ありがとうございました！