ricollab の郵便番号検索サービスを利用した郵便番号検索を Ext.form.ComboBox のページングで実装する。
サンプル：http://www.moriwaki.net/ext/zip.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>ComboBox - 郵便番号検索</title>
<link rel="stylesheet" type="text/css" href="/css/ext-all.css" />
<script type="text/javascript" src="/js/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-all.js"></script>
<script type="text/javascript" src="zip.js"></script>
<style type="text/css">
.ext-ie .x-form-text {position:static !important;}
</style>
</head>
<body>
<div style="width:400px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">郵便番号検索</h3>
<input type="text" name="search" id="search" />
<br />
〒<input type="text" maxlength="7" name="zip" id="zip" />
<br />
<input type="text" name="address" id="address" />
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</body>
</html>
JavaScript:
Ext.BLANK_IMAGE_URL = '/images/default/s.gif';
Ext.onReady(function(){
var ds = new Ext.data.Store({
baseParams: {
type: 'json',
count: 10
},
proxy: new Ext.data.ScriptTagProxy({
url: 'http://zip.ricollab.jp/search'
}),
reader: new Ext.data.JsonReader({
root: 'result',
totalProperty: 'totalResults',
id: 'zipcode'
}, [
{name: 'zipcode', mapping: 'zipcode'},
{name: 'address', mapping: 'address'}
])
});
// ページングの送信パラメータをサイトに合わせて修正
ds.on('beforeload', function(s, o) {
o.params.page = o.params.start / o.params.limit + 1;
});
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<h3>〒{zipcode}</h3>',
'{address}',
'</div></tpl>'
);
// 郵便番号入力
var zip = new Ext.form.TextField({
applyTo: 'zip',
maxLength: 7,
width: 100,
selectOnFocus: true
});
// 住所入力
var address = new Ext.form.TextField({
applyTo: 'address',
width: 350,
selectOnFocus: true
});
// 郵便番号 or 住所検索コンボボックス
var search = new Ext.form.ComboBox({
store: ds,
displayField:'title',
typeAhead: false,
loadingText: '検索中...',
emptyText: '郵便番号または住所の一部を入力してください',
width: 350,
pageSize:10,
hideTrigger: true, // トリガー要素を隠す
tpl: resultTpl,
applyTo: 'search',
itemSelector: 'div.search-item',
queryParam: 'q',
minChars: 2,
onSelect: function(record){
zip.setValue(record.data.zipcode);
address.setValue(record.data.address);
this.collapse();
},
onKeyUp : function(e){
if(this.editable !== false && !e.isSpecialKey()){
this.lastKey = e.getKey();
}
}
});
var timeout;
var comboValue = '';
var focusCombo = function() {
if (comboValue != search.el.dom.value) {
if (search.isExpanded()) {
search.collapse();
}
search.onTriggerClick();
comboValue = search.el.dom.value;
}
timeout = setTimeout(focusCombo, 500);
}
var blurCombo = function() {
clearTimeout(timeout);
}
search.on({
'focus': focusCombo,
'blur': blurCombo
});
});
Trackback URL:
