ext combox输入智能补全，类似google搜索框
search.js
Ext.onReady(function() {
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'Tree.jsp'
}),
reader : new Ext.data.JsonReader({}, [{
name : 'pi_code'
}, {
name : 'pi_name'
}])
});
var resultTpl = new Ext.XTemplate('<tpl for="."><div class="search-item">',
'<h3><span>{pi_name}</span></h3></div></tpl>');
var search = new Ext.form.ComboBox({
id : 'com',
store : ds,
displayField : 'title',
typeAhead : false,
loadingText : 'Searching...',
width : 100,
// pageSize : 10,
minChars : 0,
mode : 'remote',
hideTrigger : true,
tpl : resultTpl,
applyTo : 'name',
itemSelector : 'div.search-item',
onSelect : function(record) { // override default onSelect to do redirect
Ext.getCmp('com').setValue(record.data.pi_name);
}
});
});
Tree.jsp
String query = request.getParameter("query");//输入内容
//以下可以进行数据库查询，输入json文本
String json = "[{pi_code:'200901', pi_name:'2009年一季度"+new Date().getTime()+"'},{pi_code:'200902', pi_name:'2009年二季度"+query+"'},{pi_code:'200903', pi_name:'2009年三季度'},{pi_code:'200904', pi_name:'2009年四季度'}]";
response.getWriter().write(json);
response.getWriter().close();
search.jsp
<head>
<script type="text/javascript" src="search.js"></script>
</head>
<body>
<input type="text" size="40" name="search" id="search" />
</body>