郵便番号検索jquery.jpostal.jsの実装

概要

郵便番号から住所を検索し、結果をセットするjsの実装をしてみました。
今回使用したのは、"jquery.jpostal.js"

環境

• Rails7
• ActiveAdmin

導入方法

本家を参照のこと。

環境内で動作させたかったので、郵便番号データ(json)はプロジェクト内に配置しました。

• public配下にjson配置
  public/jpostal_json

• assets配下でもOKでした(追記)
  assets/jpostal_json

コード

app/assets/javascripts/admin/active_admin.js

//= require jquery.jpostal.js
//= require admin/postalcode

app/assets/javascripts/admin/postalcode.js

$(function () {
  $("#nursing_facility_user_post_code").jpostal({
    postcode: ["#nursing_facility_user_post_code"],
    address: {
      "#user_prefecture": "%3",
      "#user_municipality": "%4",
      "#user_subsequent_address": "%5",
    },
    url: {
      http: "/jpostal_json/",
      https: "/jpostal_json/",
    },
  });
});

urlパラメータはpublic配置した場合。
assetsの場合は、こちらでいけるかも(未検証)

url: {
   http: "assets/jpostal_json/"`

変更イベントの検知にはtriggerを使えばよいみたい。

	$('#postcode1').jpostal({
        ・・・
		trigger : {
			'#address1_kana'  : true,
			'#address2_kana'  : true,
			'#address3_kana'  : false
		}
	});

	$("#address1_kana").on("change", function() {
	    var val = $("#address1_kana").val();
	    val = "onchange_" + val;
	    $("#address1_kana_onchange").val(val);
	});