Ext 下拉菜单复选 关键字独立 服务器检索

第一次输入关键字
[img]http://dl.iteye.com/upload/attachment/441913/e4460d7c-0e13-3a83-a3f6-b6fa28c55130.jpg[/img]
第二次输入关键字
[img]http://dl.iteye.com/upload/attachment/441915/a4466c9f-aefd-379e-a0a4-85a862884b61.jpg[/img]

第三次接收键盘向下键默认选择所有结果

[img]http://dl.iteye.com/upload/attachment/441917/0b54f5f7-54ce-368f-aec4-175fd21e9860.jpg[/img]

/*----------------------------------------------------------------*/
/*
*模仿google的联想输入,“多关键字独立联想”,支持每个关键字独立后台查询检索,
*目前网上大多都是多个关键字联合匹配。本例每输入一个关键字都是针对本关键字独立提交后台进行查询检索。
*最后结束输入后输入框内所有关键字作为联合查询条件进行检索。
*例如:在输入框中输入“M”会显示所有包含“M”的查询结果;
在选择关键字之后自动追加“;”作为多个关键字的分隔符;
继续输入“K”的时候“beforequery”事件将“K”作为本次模糊匹配条件作为“query”的值提交到服务器端查询。
*/
var temp='';
var search = new Ext.form.ComboBox({
id:'searchCom',
store: this.gatewaystore,
displayField:'gatewayname',
//valueField:'gatewayid',
hiddenName:'GATEWAYRevh',
typeAhead: false,
mode : 'remote',
loadingText: 'Searching...',
width: 170,
pageSize:10,
triggerAction:'query',
lastQuery:'',
hideTrigger:true,
minChars:0,
selectOnFocus:true,
//tpl: resultTpl,
//triggerAction: 'all',
emptyText:'请选择...',
//value:'%17',
//applyTo: 'search',
//itemSelector: 'div.search-item',
selectOnFocus:true
});
/*提交服务器端获取下拉菜单列表之前获取本次查询条件作为query值传给服务器并获取下拉菜单结果*/
search.on('beforequery',function(qe){
var combo = qe.combo;
//输入框的值

var q = qe.query;
if(q == '')
temp = '';
forceAll = qe.forceAll;
if(forceAll === true || (q.length >= combo.minChars)){

if(combo.lastQuery !== q){

combo.lastQuery = q;
if(combo.mode == 'local'){
combo.selectedIndex = -1;
if(forceAll){
combo.store.clearFilter();
}else{
//写自己的模糊过滤条件
combo.store.filterBy(function(record,id){
alert(combo.displayField);
var text = record.get(combo.displayField);
var val=combo.getValue();
/**/
//过滤掉与输入框的值相等的记录
if(text==val){
return false;
}
return (text.indexOf(q)!=-1);
});
}
combo.onLoad();
}else{
if(q.indexOf(";",0)>-1){
combo.store.baseParams[combo.queryParam] = q.substring(q.lastIndexOf(";")+1);
combo.store.load({
params: combo.getParams(q)
});
}else{
//alert(q);
combo.store.baseParams[combo.queryParam] = q;
combo.store.load({
params: combo.getParams(q)
});
}
combo.expand();
}
}else{
combo.selectedIndex = -1;
combo.onLoad();
}
}
return false;
});
/*选中菜单项之后构造输入框显示内容,以“;”为分隔符*/
search.on('select',function(combo, record,index){
temp += combo.getValue()+';';
combo.setValue(temp);
});
/*----------------------------------------------------------------*/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值