[Super Easy!] Auto-fill addresses using YubinBango.js

Hello! This is Fukui from the System Development Department!
I'd like to introduce to you the form I created using a js library called YubinBango.js, which automatically fills in the address just by entering the postal code!

It's very easy and quick to implement, so if you're interested, please give it a try!

*The information required for implementation is listed in the README on GitHub below, so if you are in a hurry, please see here:
https://github.com/yubinbango/yubinbango

What is YubinBango.js?

First, let me give you a brief introduction to what YubinBango.js is

As I've already pretty much explained at the beginning,

this is a very useful JavaScript library that
will automatically enter the corresponding address into a specified input form when you ① enter a postal code

It's very easy to use. After loading the library into your html, all you have to do is assign the specified class to the "Postal Code Input Form" and "Address Input Form (Address Display Area)". (Easy...!!)

I actually tried it!

So, I actually created a sample form. (The decoration is done with Bootstrap.)

Below is the code I wrote to try it out!

    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><div class="col-12 px-2"><form action="" class="h-adr" method="post"> <span class="p-country-name" style="display:none;">Japan</span><div class="card card-info mt-4"><div class="card-header"><h3 class="card-title"> Postal code auto-fill</h3></div><div class="form-horizontal"><div class="card-body"><div class="form-group row"> <label for="zip_code" class="col-1 col-form-label">post code</label> <div class="col-3"><input type="text" name="zip_code" id="zip_code" placeholder="郵便番号を入力してください" class="p-postal-code form-control" value=""></div></div><div class="form-group row"> <label for="prefecture_name" class="col-1 col-form-label">prefectures</label> <div class="col-3"><input type="text" id="prefecture_name" class="p-region form-control" value=""></div></div><div class="form-group row"> <label for="city_name" class="col-1 col-form-label">municipalities</label><div class="col-3"><input type="text" id="city_name" class="p-locality form-control" value=""></div></div><div class="form-group row"> <label for="town_name" class="col-1 col-form-label">Town area</label><div class="col-3"><input type="text" id="town_name" class="p-street-address form-control" value=""></div></div><div class="form-group row"> <label for="extended_address_name" class="col-1 col-form-label">Other address</label> <div class="col-3"><input type="text" id="extended_address_name" class="p-extended-address form-control" value=""></div></div></div></div></div></form></div>

Implementation points

There are four key points to keep in mind when implementing this:

1. Specify "h-adr" as the class of the form tag.
2. Specify "Japan" as the "p-country-name" class element within the form.
3. Specify "p-postal-code" as the class of the form where the postal code is entered.
4. Specify the prefecture name (p-region), city/ward/town/village (p-locality), street area (p-street-address), and subsequent address (p-extended-address) as the class of the element that will display the address.

And when I entered a postal code into the sample form I created, the results were as follows!

In this way, the address will be automatically entered according to the postal code.
By the way, the postal code can be automatically entered without hyphens .
In the sample, the prefecture name and city/ward/town/village are separated, but it is also possible to enter the prefecture name (p-region), city/ward/town/village (p-locality), street area (p-street-address), and subsequent address (p-extended-address) a concatenated string on one line by specifying the class attribute of a single element .

bonus

YubinBango.js is extremely useful, so I decided to take a look at when it actually works

If you check the Chrome Developer Tools, the keyup event listener has been added.

So, the auto-fill process was working when you "entered the zip code"!

...That means,
yes! This event can be changed to a trigger condition other than keyup !

The js file is available on GitHub, which we mentioned at the beginning, so create a js file using the JavaScript source code from the following link:
https://github.com/yubinbango/yubinbango/blob/gh-pages/yubinbango.js
*This time, you will need to load the newly created js file. Please check that you are not loading it via CDN.

We won’t go into the full JavaScript code, but you can see in the code below that a keyup event listener has been added

          r[r.length - 1].addEventListener("keyup", function (e) { t.prototype.u(nv(e.target.parentNode)) }, !1)

By changing this event, you can specify any event you like!

This time, let's say we change it to a "click" event .

          r[r.length - 1].addEventListener("click", function (e) { t.prototype.u(nv(e.target.parentNode)) }, !1)

Let's check the developer tools.

We can see that the event has been successfully changed to "click"!

Of course, you can change it to various events other than click, such as keydown or focus!

My impressions after using YubinBango.js

Today, we introduced how to auto-fill addresses using YubinBango.js!

There are various ways to automatically enter and display addresses, so I think the situations in which it can be used in actual development are quite limited, but I think it's perfect for developing apps to be used in a relatively closed environment, such as internal tools! In
any case, the appeal of this is that it's very easy to use and can be implemented quickly, so I hope you'll give it a try!

lastly

I am a member of the system development service site "SEKARAKU Lab."
Beyond offers a one-stop service for everything from server design and construction to operation, so if you have any problems with server-side development, please feel free to contact us.
SEKARAKU Lab: [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

Thank you for reading to the end!