如何让我们的ExtJs combobox支持模糊匹配

我们在实际的项目过程上，经常会遇到下拉框的项过多，导致找一个选项都很困难，那么我们就需要给下拉框加个过滤。

那怎么给EXTjs的下拉框添加一个模糊过滤呢：

了解Ext的朋友们可能知道，从Ext2.0开始Ext.form.ComboBox有个typeAhead的属性可以使combobox在用户输入的同时根据已绑定的数据中弹出一些提示，但是这些提示并不具备模糊过滤的功能，比如绑定的数据中有个叫“你好”，当输入“你”的时候可以出现提示，但是输入“好”的时候是不会弹出提示的。 

那么，我们应该怎么让它支持模糊过滤呢？

其实很简单，我们只需要在创建下拉框时，给下拉框添加一个监听事件，代码如下：

//以下监听事件用于对下拉项进行模糊匹配

                              ,listeners:{

                              beforequery : function(e){

                              var combo = e.combo;

                        if(!e.forceAll){

                        var value = e.query;

                        combo.store.filterBy(function(record,id){

                        var text = record.get(combo.displayField);

                        return (text.indexOf(value)!=-1);

                        });

                        combo.expand();

                        return false;

                        }

                                 }

                              }

方法2

EXT combobox 下拉框 动态模糊匹配

 

转载▼

标签：  ext   combobox   下拉框   动态模糊匹配   全字匹配   it

分类： 编程技术

EXT combobox 下拉框 动态模糊匹配支持全字匹配

示例如下：

var gfxmComb  = new Ext.form.ComboBox({  
        id : 'gfxmComb',  
        store : gfxmStore,  
        typeAhead : true,  
        mode : 'local',  
        editable : true,  
        displayField :'xmMc',  
        valueField :'xmBm',  
        triggerAction : 'all',  
        selectOnFocus : true,  
        listeners : {  
            'beforequery':function(e){  
                   
                var combo = e.combo;    
                if(!e.forceAll){    
                    var input = e.query;    
                    // 检索的正则   
                    var regExp = new RegExp(".*" + input + ".*");  
                    // 执行检索   
                    combo.store.filterBy(function(record,id){    
                        // 得到每个record的项目名称值   
                        var text = record.get(combo.displayField);    
                        return regExp.test(text);   
                    });  
                    combo.expand();    
                    return false;  
                }  
            }  
        }  
    });