jQuery Mobileのメールフォームの郵便番号入力で住所自動入力をする。 13.09.18  （更新: 20.10.06）

jQueryMobileのメールフォームの住所項目に郵便番号を入力すると都道府県のプルダウンと住所欄を自動入力されるように下記の「AjaxZip 2.0」というajaxを使わせていただいた。
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

HTMLヘッダーで必要なJSファイル「ajaxzip2.js」を1つ（「prototype.js」または「jquery.js」を別途読み込む。どちらでも動くのが便利）読み込み、郵便番号のテキストボックスを修正するだけという簡単な実装方法なのがとてもいいです。
ただ、jQuery Mobileのメールフォームに実装しようとすると郵便番号を入力しても都道府県がプルダウンの場合、表示が変化しない。内部的にはセットされているようだが、表示が変わらないのは気持ち悪い。
これはjQuery MobileのスキンがHTML読み込み時に適用されているためで郵便番号入力時に一度、都道府県のプルダウンをリフレッシュする必要がある。

方法は簡単。
都道府県のテキストボックスのidが「zip」、都道府県のプルダウンのidが「pref」とすると、HTMLヘッダー、もしくは外部JSファイルとして下記を追加してください。

「blur」はフォーカスが離れた時、つまり都道府県のテキストボックスからフォーカスが離れた時に都道府県プルダウンをリフレッシュしています。「AjaxZip 2.0」の設定（郵便番号テキストボックスの「AjaxZip2.zip2addr」の引数）で住所のテキストボックスにフォーカスが移動するように設定してください。