郵便番号の入力から住所を自動で反映させる

フォームから住所を書く際に郵便番号を入力するだけで自動で住所が入力されたら楽なのでその流れをDjangoのコードで書けるようにメモ。
※既にアプリは出来てるものとして、その部分は割愛します。

ルーティング設定(urls.py)

urls.py

from django.urls import path,include
from .import views
from django.views.generic import TemplateView

app_name = 'アプリ名'
urlpatterns = [
    path('', views.IndexView.as_view(),name="index"),
    path('inquiry/', views.InquiryView.as_view(),name="inquiry"),
]

後にInquiry classを作る予定でこのpath設定。

ビューの編集（views.py）

views.py

from .forms import InquiryForm #forms.pyをインポート
from django.urls import reverse_lazy #処理が終わった後に画面に飛ばす処理

class InquiryView(generic.FormView):
    template_name = "inquiry.html"
    form_class = InquiryForm
    success_url = reverse_lazy('アプリ名:inquiry')

フォームの設定(forms.py)

forms.py

import os
from django import forms
from django.db.models import fields
#(省略)

Zipcode = {
    'zip_code':
        forms.TextInput(
            attrs={'class': 'p-postal-code','placeholder': '記入例：1060022'}, 
            ),
}

class InquiryForm(forms.Form):#クラス名は必要に応じて変える
# 郵便番号からcityまでを自動入力
    zipcode = forms.RegexField(label='郵便番号(ハイフンなし)',
        regex=r'^[0-9]+$',
        max_length=7,
        widget=forms.TextInput(attrs={'onKeyUp' : "AjaxZip3.zip2addr(this,'','state','city')"}),
    )
    state = forms.CharField(label='都道府県',max_length=6)
    city = forms.CharField(label='市区町村',max_length=10)
    address_1 = forms.CharField(label='番地',max_length=10)
    address_2 = forms.CharField(label='建物名・部屋番号',max_length=10)


    def __init__(self,*args,**kwargs):#入力フォーム表示用
        self.fields['zipcode'].widget.attrs['class']='form-control col-11'
        self.fields['zipcode'].widget.attrs['placeholder']='例：1600022 '

        self.fields['state'].widget.attrs['class']='form-control col-11'
        self.fields['state'].widget.attrs['placeholder']='都道府県をここに入力してください'

        self.fields['city'].widget.attrs['class']='form-control col-11'
        self.fields['city'].widget.attrs['placeholder']='市区町村をここに入力してください'

        self.fields['address_1'].widget.attrs['class']='form-control col-11'
        self.fields['address_1'].widget.attrs['placeholder']='番地をここに入力してください'

        self.fields['address_2'].widget.attrs['class']='form-control col-11'
        self.fields['address_2'].widget.attrs['placeholder']='建物名・部屋番号をここに入力してください'

いい感じに動いてもらうためのJavaScript

今回はAjaxzip3を使ってるので、そこから引用してます。

※今回はbase.htmlにべた書きしましたが、他におすすめがあれば教えてください。

base.html

    <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>