Custom Field Templateプラグインでajaxzip3を使う

進めている案件で使うかもしれないのでメモです。(既にありそうなネタだけど)
カスタムフィールド拡張プラグイン Custom Field Template と郵便番号検索API ajaxzip3 を使って、投稿のカスタムフィールドに郵便番号を入力したら住所が出るようにします。
それぞれの詳しい使い方については本家を参照下さい。

カスタムフィールドコンテンツ登録

“設定 > カスタムフィールドテンプレート”のコンテンツ部分に以下を記述します。

[zipcode]<br />
type = text<br />
size = 10<br />
label = 郵便番号</p>
<p>[pref]<br />
type = text<br />
size = 10<br />
label = 都道府県</p>
<p>[addr]<br />
type = text<br />
size = 50<br />
label = 市町村区

投稿に郵便番号・都道府県・市町村区の入力欄が表示されました。

郵便番号を入力したら自動的に都道府県・市町村区に住所が入力されるようにします。

ajaxzip3読み込み、JavaScript記述

ajaxzip3の設置方法を見ると

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
でスクリプトを読み込み
&lt;input type=&quot;text&quot; name=&quot;zip01&quot; size=&quot;10&quot; maxlength=&quot;8&quot; onKeyUp=&quot;AjaxZip3.zip2addr(this,'','pref01','addr01');&quot;&gt;<br />
&lt;input type=&quot;text&quot; name=&quot;pref01&quot; size=&quot;20&quot;&gt;<br />
&lt;input type=&quot;text&quot; name=&quot;addr01&quot; size=&quot;60&quot;&gt;
のonKeyUpイベント実行時にname属性”pref01″,”addr01″のフィールドに値を入力しているようなのでJavaScriptを追加する事に。

JavaScriptの記述箇所は”設定 > カスタムフィールドテンプレート”のテンプレートインストラクションになります。

JavaScriptを記述する前にカスタムフィールドのname値が必要なので投稿ページのソースを見ておきます。

&lt;dl id=&quot;dl_zipcode0_0&quot; class=&quot;dl_text&quot;&gt;<br />
	&lt;dt&gt;&lt;span&gt;&lt;label for=&quot;zipcode0_0&quot;&gt;zipcode&lt;/label&gt;&lt;/span&gt;&lt;/dt&gt;<br />
	&lt;dd&gt;&lt;p class=&quot;label&quot;&gt;郵便番号&lt;/p&gt;&lt;input id=&quot;zipcode0_0&quot; name=&quot;zipcode[0][]&quot; value=&quot;&quot; type=&quot;text&quot; size=&quot;10&quot; /&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
&lt;dl id=&quot;dl_pref1_0&quot; class=&quot;dl_text&quot;&gt;<br />
	&lt;dt&gt;&lt;span&gt;&lt;label for=&quot;pref1_0&quot;&gt;pref&lt;/label&gt;&lt;/span&gt;&lt;/dt&gt;<br />
	&lt;dd&gt;&lt;p class=&quot;label&quot;&gt;都道府県&lt;/p&gt;&lt;input id=&quot;pref1_0&quot; name=&quot;pref[1][]&quot; value=&quot;&quot; type=&quot;text&quot; size=&quot;10&quot; /&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
&lt;dl id=&quot;dl_addr2_0&quot; class=&quot;dl_text&quot;&gt;<br />
	&lt;dt&gt;&lt;span&gt;&lt;label for=&quot;addr2_0&quot;&gt;addr&lt;/label&gt;&lt;/span&gt;&lt;/dt&gt;<br />
	&lt;dd&gt;&lt;p class=&quot;label&quot;&gt;市町村区&lt;/p&gt;&lt;input id=&quot;addr2_0&quot; name=&quot;addr[2][]&quot; value=&quot;&quot; type=&quot;text&quot; size=&quot;50&quot; /&gt;&lt;/dd&gt;<br />
&lt;/dl&gt;
都道府県は”pref[1][]”、市町村区は”addr[2][]”なので先の設置例の”pref01″、”addr01″部分を置き換えます。

また、記述例ではonKeyUpイベントをinput要素に記述していますがCustom Field Templateでの設定方法がよく分からなかったので郵便番号入力フィールドのid、”zipcode0_0″を使いjQueryで処理したいと思います。

というわけでテンプレートインストラクションに以下を記述して完成。

&lt;script src=&quot;http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
jQuery(function(){<br />
	jQuery('#zipcode0_0').keyup(function(e){<br />
		AjaxZip3.zip2addr(this,'','pref[1][]','addr[2][]');<br />
	});<br />
});<br />
&lt;/script&gt;

郵便番号を入力すると無事住所が自動入力されました。

出来てしまうと簡単でしたがフィールドへの入力、name属性じゃなくてid属性を使うものと勘違いしてたので “AjaxZip3.zip2addr(this,”,’pref1_0′,’addr2_0′);” と指定してしまい躓きました…

参考サイト

“Custom Field Templateプラグインでajaxzip3を使う” への1件の返信

コメントは受け付けていません。