2007-07-24

Postal Coder Plugin for jQuery 1.1.2

Postal Coder Plugin は Postal Search Ajax APIPostal.Coder クラス を jQuery プラグインにラップしたものです。Postal Coder Plugin を使うと Postal.Coder クラスが持つ「住所の単語から郵便番号を検索する」機能を jQuery らしくメソッドチェーンの中で利用できます。

住所の単語から郵便番号を検索するときは coder メソッドを使います。coder メソッドの引数には住所の単語とコールバック関数を指定します。coder メソッドはその中で Postal.Coder クラスをを使って住所の単語から郵便番号を検索し、その結果をコールバック関数を使って伝えます。このときの検索は非同期です。

コールバック関数の引数は検索結果とステータスコードです。検索結果は Postal.Coder クラス の response プロパティに対応します。住所の単語から郵便番号が見つからないときは空の配列になります。ステータスコードは Postal.Coder クラス の status プロパティに該当します。エラーが発生したときは 200 以外の値になります。

Postal Coder Plugin for jQuery ダウンロード
/*
* Postal Coder Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// $.coderSettings
$.coderSettings = {
timeout: 30
};

// $.coderSetup
$.coderSetup = function(settings) {
jQuery.extend($.coderSettings, settings);
};

// $.coder
$.coder = function(a, fn) {
var coder = new Postal.Coder($.coderSettings);
coder.onload = function() {
fn(coder.response, coder.status);
};
coder.onerror = function() {
fn([], coder.status);
};
coder.send(a) || setTimeout(function() {
fn([], 200);
}, 10);
};

// coder
$.fn.coder = function(a, fn) {
var self = this;
$.coder(a, function() {
self.each(fn, arguments);
});
return self;
};

})(jQuery); // function($)
次のサンプルは住所の単語 "新宿" の郵便番号を検索するものです。はじめに検索中を表す loading ... というテキストを表示し、その後 coder メソッドを使って住所の単語から郵便番号を検索しています。郵便番号が見つかったときは、前述の loading... を上書きして郵便番号をリスト表示しています。

Postal Coder Plugin for jQuery サンプル
<div id="r"></div>

<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?"></script>
<script type="text/javascript" src="jquery.coder.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.text('Loading ...')
.coder('新宿', function(response) {
var ul = $('<ul />');
$.each(response, function() {
$('<li />')
.text(this.c)
.appendTo(ul);
});
$(this)
.empty()
.append(ul);
});
});
//]]>
</script>
検索のタイムアウトを長くするときは $.coderSetup メソッドを使います。タイムアウトの初期値は30秒です。通常は変更せずそのまま使います。$.coderSetup メソッドは Postal.Coder クラス のコンストラクタのオプションに対応します。
$.coderSetup({
timeout: 180
});
Postal Coder Plugin は 2007年8月上旬から Postal Search Ajax API に含めて配布します。それまでは Postal Coder Plugin をダウンロードしてお使いください。Postal Coder Plugin のライセンスは jQuery と同じにしておきます。

0 件のコメント: