郵便番号　入力フォーム

KK_2024

作成する内容

郵便番号の入力途中で候補となる住所を表示する。

ソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>zipcloud住所検索</h1>
    <p>
        <input type="text" id="searchInput">
    </p>
    <p id="message"></p>
    <p id="results"></p>


<script>
    const searchInput = document.getElementById('searchInput');
    const zipcloudURL = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=";


    searchInput.addEventListener('input', function() {
        const zipcode = this.value.trim(); // 入力されたキーワードを取得して、前後の空白を削除する
        const url = zipcloudURL + zipcode + "&limit=100";

        document.querySelector("#message").textContent = "郵便番号検索中...";
        // zipcloudからJSONデータを取得　⇒　取得後formatJSON呼び出し
        fetch(url)
            .then(response => response.json())
            .then(data => formatJSON(data));
    });

    // 住所を整形して表示する
    function formatJSON(json) {
        console.log(json);
        // テキストボックスクリア
        document.querySelector("#message").textContent = "";
        document.querySelector("#results").textContent = "";

        if (json.status !== 200) {    // エラーメッセージ有り
            document.querySelector("#message").textContent = json.message;
        } else if (json.results === null) {    // 存在しない郵便番号
            document.querySelector("#message").textContent = "郵便番号が存在しません";
        } else {    // 取得した住所情報を表示
            let table = "";
            for (let i = 0; i < json.results.length; i++) {
                table += "<table>";
                table += "<caption>候補" + (i + 1).toString() + "</caption>";
                table += "<tr><th>都道府県</th><td>" + json.results[i].address1 + "</td></tr>";
                table += "<tr><th>市郡区町村</th><td>" + json.results[i].address2 + "</td></tr>";
                table += "<tr><th>住所</th><td>" + json.results[i].address3 + "</td></tr>";
                table += "</table>";
            }
            document.querySelector("#results").innerHTML = table;
        }
    }
</script>

    
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？