Ext 下拉菜单复选 关键字独立 服务器检索
程序员文章站
2022-06-11 10:58:58
...
第一次输入关键字
第二次输入关键字
第三次接收键盘向下键默认选择所有结果
/*----------------------------------------------------------------*/
/*
*模仿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);
});
/*----------------------------------------------------------------*/
上一篇: 解决jQuery使用append添加的元素事件无效的问题
下一篇: 快速启动 正确配置好网卡工作模式