`
icedcoco
  • 浏览: 38444 次
社区版块
存档分类
最新评论

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

    博客分类:
  • EXT
阅读更多

第一次输入关键字

第二次输入关键字


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



/*----------------------------------------------------------------*/
/*
*模仿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);
  });
/*----------------------------------------------------------------*/
  • 大小: 13.9 KB
  • 大小: 16 KB
  • 大小: 12.5 KB
分享到:
评论

相关推荐

    基于EXT2.2的下拉复选框

    总的来说,"基于EXT2.2的下拉复选框"是一个利用EXT2.2框架和相关插件实现的Web组件,它提供了在下拉列表中多选的功能,这通常涉及对EXT2.2的`ComboBox`组件进行扩展,使用自定义的JavaScript插件(如`Ext.mm....

    ext 下拉菜单。(不要下,不能用)

    在EXT JS库中,下拉菜单(Dropdown Menu)是一种常见的组件,用于提供多个选项供用户选择。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,它提供了丰富的UI组件和数据绑定机制。然而,从标题...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    Ext下拉树、下拉表格

    在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...

    Ext combobox 下拉多选框带搜索功能

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

    extjs4.1下拉复选框完整DEMO

    2. **配置store**:为下拉复选框关联一个`Ext.data.Store`,该store负责从服务器获取数据。你需要设置store的URL(`proxy.url`)和数据模型(`fields`)。 3. **监听store的load事件**:当store加载数据完成后,会...

    Extjs 下拉菜单实现拼音输入进行检索

    Extjs 下拉菜单实现拼音输入进行检索

    javascript下拉多选框复选框

    在JavaScript编程中,下拉多选框和复选框是常见的用户交互元素,它们用于收集用户的多选项选择信息。在本项目中,我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框,而不是依赖于像jQuery这样的库,...

    Ext下拉列表扩展lovcombo

    EXT下拉列表扩展lovcombo的实现,主要是对ComboBox进行了自定义,将下拉菜单中的选项呈现为一组可被勾选的复选框。这样做可以显著增强用户体验,特别是当选项数量较多时,用户可以快速地多选,而无需反复打开下拉...

    带复选框的下拉框

    总的来说,"带复选框的下拉框"是一个在Ext JS框架中实现的自定义组件,它提供了在下拉列表中选择多个选项的能力。通过解决不同版本的兼容性问题,这个组件可以在3.2至3.4版本的Ext JS中稳定工作。对于需要多选功能的...

    ext 下拉树 ext2

    标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...

    Ext 三态 复选树

    在IT行业中,"Ext 三态复选树"是一个关于前端开发的概念,特别是与使用ExtJS框架构建用户界面相关的。ExtJS是一个强大的JavaScript库,用于创建桌面应用的复杂用户界面。在这个场景中,"三态复选树"指的是在树形结构...

    ext js 下拉树

    下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它结合了下拉列表和树结构的功能,通常用于展示层次化的数据,并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成:一个文本框和一个关联的下拉面板...

    多款多级联动下拉菜单打包!必有一款适合你!

    5. **ext.rar**:EXT.js是一个流行的JavaScript库,用于构建富客户端应用,这个rar文件可能包含EXT.js框架下的多级联动下拉菜单组件。 6. **MultilevelSelect-5265.rar**:"MultilevelSelect"直译为多级选择,这...

    Ext下拉列表树

    Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...

    ext 下拉树demo

    在IT领域,"ext 下拉树demo"是一个典型的前端开发示例,主要用于构建用户界面,特别是在数据管理和展示层级结构时。...对于前端开发者来说,掌握EXT下拉树的实现不仅能提升项目开发效率,还能增强对EXT框架的理解。

    ext复选框的ColumnTree扩展包

    此外,你需要处理与后端的数据交互,当用户更改复选框状态时,这些变化需要同步到服务器。这通常通过AJAX请求实现,EXT提供了`Ext.Ajax`类来处理异步通信。在发送请求前,你需要获取当前选中的节点信息,这可以通过...

    ext多选下拉列表的全选功能实现

    默认情况下,ComboBox只允许用户选择一个值,而MultiComboBox则允许用户选择多个值,这些值通常以复选框的形式展示。 要实现全选功能,我们需要考虑以下关键步骤: 1. **配置MultiComboBox**:在创建MultiComboBox...

    HTML Select 下拉菜单功能扩展

    例如,jQuery插件如Select2或Chosen提供了搜索功能、多选支持、自定义样式等特性,使得下拉菜单更易于使用且视觉效果更佳。这些插件通过监听用户事件,如点击、输入搜索关键字,实时更新下拉列表,提高用户体验。 ...

    ext4实现带复选框的多选下拉框

    总结来说,"ext4实现带复选框的多选下拉框"涉及了前端开发中的CSS样式设计、JavaScript编程、服务器端交互以及可能的第三方库或框架的使用。理解这些知识点,对于开发高效且用户体验良好的Web应用至关重要。

Global site tag (gtag.js) - Google Analytics