jQselectable(jQuery.selectable.js)とAjaxZip2を併用する

コメントでいただいたので記事にします。AjaxZip2を実行したときに都道府県が補完されますが、都道府県にselectableを適用している場合、補完されても表示が切り替わりません。これの対応方法です。

昨年11月にjQuery.selectable.jsをアップデートしたというプラグインをGoogle Codeで公開しました。公開直後にから広がり、PHPSPOTさんでも紹介されたり、jQselectableは色々な方に見ていただけましたが、肝心のドキュメントがありません。。基本的に使い方はjQuery.selectable.jsと同じで、今回説明するrebuildというメソッドを追加しました。

まずはサンプルをご覧ください。

必要ファイルの読み込み

jQueryをGoogleのJSAPIから読んでいますが、ローカルでもいいです。

実行手順

jQselectableの実行

ここはjQuery.selectable.jsと同じです。

var pref = $("#pref").jQselectable({
  set: "fadeIn",
  setDuration: "fast",
  opacity: .9
});

が、ひとつだけ違うところがあって

var pref = $("#pref").jQselectable({

実行したものを変数に入れておきます。

AjaxZip2を実行するためにハンドラをバインドする

AjaxZip2の使い方は分かっているものと仮定して進めますので、初めてな方はAjaxZip2の配布ページを確認してください。

$("#zip").keyup(function(){
 // AjaxZip2
 AjaxZip2.zip2addr(this,"pref","addr");
});

補完後にselectableをrebuildする

補完後に、フォーカスが住所の最後に移動しますがこのとき発生する、blurを利用します。

$("#zip").blur(function(){
 // rebuilds target jQselectable element
 pref.rebuild();
});

これでAjaxZip2実行後に、selectableの見た目部分が構成し直され、補完された都道府県が表示されます。