记录一下Ext js开发中遇到的下拉框检索需求。

由于数据多，Extjs的组件下拉框显示数据多，不好选择，需要能在输入框输入字段，然后下拉框只显示输入字段相关的内容，进行一个模糊查询，并且能够支持反复匹配显示相关的内容。

最终找到相关的关键性操作：combo.store.filterBy，使用store的过滤器方法。

以下为具体代码：

"类型&emsp;",{xtype:"combo",//combo为下拉框组件width:150,id:'kind',store:getStore(true),//我这里写了方法来获取store，这里的store是你的下拉框数据来源editable: true,//输入框是否可以编辑输入displayField: "name",valueField: "kind",triggerAction : 'all',mode:'local',//remote为远程，local为本地forceSelection: true,typeAhead : true,minChars :4,//自动完成激活之前填入的最小字符queryDelay : 500,//查询延时，毫秒listeners:{ //监听器，并使用beforequery属性，来使其在点击查询按钮前触发，即不需要设置以//及点击查询按钮，输入框输入后即可自动触发显示相关的内容'beforequery' : function (e) {var combo = this,size = 15,idx = 1;if (e.query === '' || e.query == null ) {//当输入框删除内容后，清除过滤器，//显示原本store数据,使其能够再次检索combo.store.clearFilter();combo.expand();}else {if (!e.forceAll) {var input = e.query;// 检索的正则var regExp = new RegExp(".*" + input + ".*");// 执行检索combo.store.filterBy(function (record, id) {if (idx > size) {return false;}var text = record.get(combo.displayField);var flag = regExp.test(text);if (flag) {idx++;}return flag;});combo.expand();return false;}}}}
}

Ext js 下拉框模糊匹配查询，并支持反复输入检索相关推荐

ajax下拉列表模糊,JS仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 js/jQuery实现类似百度搜索功能 #container { position: absolute; left: ...
3.11 Ext JS 下拉框（Combobox）使用
Combobox , 翻译过来是组合框, 也称为下拉框. 该组件类用于创建下拉单选项组件进行选值.对应的类是:Ext.form.field.ComboBox. 基本用法最简单的用法如下: {xtyp ...
7.25 Ext JS下拉单选框(Combobox,TagFied)使用及疑难问题解决
Ext JS下拉框字段组件在Ext JS中,下拉框选择的字段组件主要有两种, 分别是Combobox 和TagField, 这两种都支持单选和多选, 呈现的效果如下: Combobox 对应的类是: ...
ofice2007 没有下拉框模糊查询功能
ofice2007没有下拉框模糊查询功能另外安装一下wps2019,换着用.
html下拉菜单模糊查询,Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: 可输入的下拉框 var j ...
html选择框加模糊查找,input selec下拉框模糊查询
input selec下拉框模糊查询 1.[代码][JavaScript]代码 //1 初始化时候,先将数据存入数组 var TempArr = [];// 存贮option var SelectOb ...
html下拉菜单模糊查询,下拉框模糊查询
转载https://blog.csdn.net/zzq900503/article/details/72382241 我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的 ...
报表下拉框多选查询及一般在sql中添加查询条件
1.sql SELECT * FROM [销量] where 1=1 ${if(len(销售员1) == 2,"","and 销售员 in (" + 销售员1 ...
winform下拉框模糊查询_怎样在c#中实现数据库数据的模糊查询
我想在vs的 dataGridView中显示查询的内容. 具体是在文本框中输入一个关键字,然后在数据库的一个表的所有字段进行查询,显示在dataGridView,麻烦大家帮忙解答一下. (下面的是 ...

Ext js 下拉框模糊匹配查询，并支持反复输入检索

记录一下Ext js开发中遇到的下拉框检索需求。

以下为具体代码：

Ext js 下拉框模糊匹配查询，并支持反复输入检索相关推荐

最新文章

热门文章