ExtJs4.2如何在combo中添加自動匹配功能

業務描述

自動匹配，顧名思義，也就是你在combo中輸入一個字符串，然後代碼會自動進行模糊匹配，把帶有此字符串的數據展示出來，方便用戶進行模糊選擇！

思路解析

在做這個功能之前我們可以直觀的感覺到幾個業務點：
1.可以輸入字符串，也就是combo是可以進行 編輯 的；
2.可以根據根據輸入的字符串進行匹配，這就需要用到 事件監聽 ，當用戶每輸入一個字符串的時候都去做一此 匹配過濾 出想要的數據進行展示；

僞代碼解析

根據上面我們已有的思路，我們再去匹配自己已有的知識庫可知：
1.combo的可編輯，我們在之前的博客中已經提到，要想combo是可編輯的，只需要把editable: true這個屬性加進去就可以了；
2.監聽事件的選擇，至於我們用什麼監聽，這裏我們選擇的是 beforequery( Object queryEvent, Object eOpts )，他的作用是： 所有查詢執行前觸發。返回false來取消查詢或設置queryEvent的Cancel屬性爲true。
3.我們還需要用到js的基礎知識正則表達式；

具體怎麼寫

以下代碼是我在實際應用中的代碼的部分，供大家參考

 		 {
            xtype: 'combo',
            name: 'projectNo',
            fieldLabel: '科目名稱',
            labelAlign: 'right',
            allowBlank: true,
            displayField: 'projectName',
            valueField: 'projectId',
            editable: true,//爲true，是可以進行編輯的意思
            value: '',
            emptyText: '請選擇',
            width: 328,
            store: 'Projects',//你的數據加載源
            listeners:{
            //添加監聽事件
                beforequery : function (e) {
                    var combo = this,
                        size = 15,
                        idx = 1;
                    if (!e.forceAll){
                        var input = e.query;
                        // 檢索的正則
                        var regExp = new RegExp(".*" + input + ".*");
                        // 執行檢索
                        combo.store.filterBy(function(record, id) {
                            if (idx > size){
                                return false;
                            }
                            // 得到每個record的項目名稱值
                            var text = record.get(combo.displayField);
                            var flag = regExp.test(text);
                            if (flag){
                                idx++; // 控制顯示記錄數
                            }
                            return flag;
                        });
                        combo.expand();
                        return false;
                    }
                }
            }

需要注意的地方

你的 store 不能是手動加載的，不然就沒有效果，因爲在進行數據匹配的時候，你的數據是沒有加載的，自然就談不上數據的匹配了，不過可以根據自己的業務需求進行修改！

其他

本博文只是筆者在實際應用中遇到的問題，比一定適合你的需求，在這裏把它貼出來，只是做學習交流，還望指正，謝謝！