【jQuery】郵便番号から簡単に住所検索プラグインのご紹介!!

シュウ

今回は【jQuery】郵便番号から簡単に住所検索プラグインのご紹介!!
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
郵便番号から住所を自動で出力するプラグインを求めてる方向けです。
今回はajaxzip3について解説しております。

今回は、郵便番号から住所を自動で出力するプラグインについての解説になります。
昔からある「ajaxzip3」になりますが、今でも簡単で使いやすいプラグインになっております。

上記のように、ユーザーが郵便番号を入力した際に、自動で都道府県+以降の住所を表示させてくれます。
少しでも、ユーザーが使いやすいフォームを作成しましょう。

[記事の内容]

ajaxzip3について

ajaxzip3とは、郵便番号から住所を自動で検索してくれるプラグインのことを示します。
jQueryが苦手な方でも問題ありません。基本は設置するだけの作業になります。
まずは下記のサイトから「ajaxzip3」をダウンロードしましょう。

●ajaxzip3.github.ioにアクセス: 1https://github.com/ajaxzip3/ajaxzip3.github.io

●「Code」ボタンをクリック: 2

●「Download ZIP」ボタンをクリック: 3

ファイルをダウンロードできたら、以下のファイルを指定します。
「js/〇〇〇〇」のjsはフォルダの名前になり、/(スラッシュ)は階層を示します。
階層を間違えると反映しないので注意が必要です。

● 1つ目は、ファイルをダウンロードして使用するパターン、
● 2つ目は、ファイルをダウンロードせずに、「URL」から読み込むパターンになります。
どちらでも問題ありません。

<script src="js/ajaxzip3.js" charset="UTF-8"></script>

「ajaxzip3」をダウンロードをせずに、「URL」から読み込むことができ、実装が可能になります。
どちらでも問題ありません。

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

記述場所について

基本的にはhead内に指定するようにしましょう。
基本構造の書き方は以下のようになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】郵便番号から.....</title>
<!--ajaxzip3-->	
<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>
</head>
<body>

　フォームが入ります。

</body>
</html>

郵便番号、都道府県と以降の住所を分ける場合について

郵便番号は「ー(ハイフン)」を入力しても問題ありません。
書き方は以下のようになります。

<!--上記の設定は省略-->
<form>
  <div>
   <label>郵便番号(ハイフンもOK)</label>
    <input type="text" name="zip01" maxlength="8" placeholder="1234567" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
  </div>
  <div> 
   <label>都道府県</label>
   <input type="text" name="pref01" placeholder="愛知県">
  </div>  
  <div>
   <label>以降の住所</label>
   <input type="text" name="addr01" placeholder="名古屋市・・・">
  </div>
</form>

/*--一部省略しております--*/
label {display: block;}

input[type="text"] {
  width: 100%;
  padding: .5em;
  box-sizing: border-box;
  font-size: 1rem;
  border: solid 2px #cccccc;
  border-radius: 5px;
}

form div + div {margin-top: 1em;}

placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。

maxlength属性とは、文字数の最大値を指定します。
maxlength="8"と指定すると、8文字を超えることはありません。

onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');が必須になってきます。
郵便番号を入力することにより、都道府県 = pref01、以降の住所 = addr01に住所が出力されます。

郵便番号、都道府県と以降の住所を分けない場合について

上記では入力が3つでしたが、今回は都道府県と以降の住所を同じ入力欄に表示させます。
書き方は以下のようになります。

<!--上記の設定は省略-->
<form>
  <div>
   <label>郵便番号(ハイフンもOK)</label>
    <input type="text" name="zip01" maxlength="8" placeholder="1234567" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
  </div>
  <div> 
   <label>都道府県と以降の住所</label>
   <input type="text" name="addr11" placeholder="愛知県名古屋市・・・">
  </div>  
</form>

/*--CSSに変更点はありません--*/

変更点について、上記と違い、「都道府県 = pref01」の入力欄がなくなったため、
(this,'','pref01','addr01');から、(this,'','addr11','addr11');"に変更しました。

郵便番号を3桁+４桁で入力し出力させる場合について

郵便番号の入力欄を3桁と４桁に分けて入力欄を作成します。
書き方は以下のようになります。

<!--上記の設定は省略-->
	<form>
		<div>
		  <label>郵便番号(3桁と4桁)</label>
		  <input type="text" name="zip21" maxlength="3" placeholder="123" class="wi20"> － <input type="text" name="zip22" maxlength="4" placeholder="4567" class="wi20" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');">
		</div>
		<div>
		  <label>都道府県</label>
		  <input type="text" name="pref21" placeholder="愛知県">
		</div>
		<div>
		  <label>市区町村</label>
		  <input type="text" name="addr21" placeholder="名古屋市">
		</div>
		<div>
		  <label>以降の住所</label>
		  <input type="text" name="strt21" placeholder="〇〇">
		</div>
	</form>

/*--郵便番号の幅のみ変更--*/
.wi20 {width: 20% !important;}

変更点について、上記と違い、「市区町村 = addr21」と「以降の住所 = strt21」、入力欄を追加しました。
('zip21','zip22','pref21','addr21','strt21')に変更しました。
また、郵便番号の入力欄の幅を変更しました。

フリガナの自動入力

【jQuery】フリガナの自動入力をしてくれるプラグインのご紹介!!

autokanaのダウンロードから設置までの流れを解説

type=”text”	【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
select	【HTML】selectの使い方、プルダウンメニューを作成しよう!
output	【HTML】outputの使い方、計算結果を表示させよう!
fieldset	【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!