在專案中遇到一個需求,在一個form表單中有兩個下拉框,一個是樹形的,另一個就是簡單的下拉框;
分別使用EasyUI的combotree 和 combobox來實現
模糊查詢的效果如下:

第一步

根據《easyUI Combobox自定義調整支援中文模糊查詢》一文提供的解決方法,修改了兩處easyUI的原始碼:

1. 調整Combobox支援模糊查詢，並支援從任意位置開始匹配
   解決方案:將字串的indexof匹配由原來的判定為頭部匹配，改為包含匹配
   return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())==0;
   
   修改為return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())>-1;
   我用的是eaysUI 1.4版本，修改程式碼在 jquery.easyui.min.js 中大概 12140 行左右。
2. 調整Combobox，以支援搜尋時中文輸入結束不自動觸發查詢
   解決方案：將觸發查詢執行的引起事件由keydown改成 keyup

  
   $.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{
   inputEvents:{
   click
 
:_8a2,
   keydown:_8a6,
   paste:_8a6,
   drop:_8a6},
   panelWidth:
   null,
   panelHeight:
   200,
   panelMinWidth:
   null,
   panelMaxWidth:
   null,
   panelMinHeight:
   null,
   panelMaxHeight:
   null,
   panelAlign:
   "left",
   multiple:
   false,
   selectOnNavigation:
   true,
   separator
 
:
   ",",
   hasDownArrow:
   true,
   delay:
   200,
   keyHandler:{
   up:
   function(e){

  
  
   },
   down:
   function(e){

  
  
   },
   left:
   function(e){

  
  
   },
   right:
   function(e){

  
  
   },
   enter:
   function(e){

  
  
   },
   query:
   function(q,e){

  
  
   }},
   onShowPanel:
   function(){

  
  
   },
   onHidePanel:
   function(){

  
  
   },
   onChange:
   function(_8d6,_8d7){

  
  
   }});

  

修改為

  
   $.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{
   inputEvents:{
   click:_8a2,
   keyup:_8a6,
   paste:_8a6,
   drop:_8a6},
   panelWidth:
   null,
   panelHeight:
   200,
   panelMinWidth:
   null,
   panelMaxWidth:
   null,
   panelMinHeight:
   null,
   panelMaxHeight:
   null,
   panelAlign:
   "left",
   multiple:
   false,
   selectOnNavigation:
   true,
   separator:
   ",",
   hasDownArrow:
   true,
   delay:
   200,
   keyHandler:{
   up:
   function(e){

  
  
   },
   down:
   function(e){

  
  
   },
   left:
   function(e){

  
  
   },
   right:
   function(e){

  
  
   },
   enter:
   function(e){

  
  
   },
   query:
   function(q,e){

  
  
   }},
   onShowPanel:
   function(){

  
  
   },
   onHidePanel:
   function(){

  
  
   },
   onChange:
   function(_8d6,_8d7){

  
  
   }});

  

我用的是eaysUI 1.4版本，修改程式碼在 jquery.easyui.min.js 中大概 11723 行左右。

完成以上步驟之後,設定easyUI的editable屬性(可編輯)為true,multiple(多選)屬性為:true;
現在就可以在下拉框中搜東西了,但是這個時候還有一個缺點,就是下拉框裡面可以任意輸入漢字,如果使用者不選擇,而是直接提交表單的話就會產生錯誤資料;

第二步

感謝一直程式緣在《easyui中combobox 驗證輸入的值必須為選項框中的資料》一文中提供的思路,我們可以新增一個事件,對使用者輸入的內容進行判斷，不合適的時候將其刪除;

下面是combotree的判斷思路:

  
       $(
   ".easyui-combotree").combotree({

  
          
   onHidePanel: 
   function() {

  
              
   var _value = $(
   this).combotree(
   'getValues');

  
              
   if(_value.length==
   0){

  
  
                   $(
   this).combotree(
   'clear');

  
  
               }
   else{

  
  
                   $(
   this).combotree(
   'setValue',_value)

  
  
               }

  
  
           }

  
  
       });

  

下面是combobox的判斷思路:

  
       $(
   ".easyui-combobox").combobox({ 
   


  
          
   onHidePanel : 
   function() { 
   


  
              
   var _values = $(
   this).combobox(
   'getValues'); 
   


  
              
   var values = 
   new 
   Array(); 
   


  
              
   var _options = $(
   this).combobox(
   'options'); 
   


  
              
   var _data = $(
   this).combobox(
   'getData');
   /* 下拉框所有選項 */ 
   


  
              
   for(
   var j = 
   0; j < _values.length; j++){ 
   


  
                  
   for (
   var i = 
   0; i < _data.length; i++) { 
   


  
                      
   if (_data[i][_options.valueField] == _values[j]) { 
   


  
  
                           values.push(_values[j]) 
   


  
                          
   break; 
   


  
  
                       } 
   


  
  
                   } 
   


  
  
               } 
   


  
  
               $(
   this).combobox(
   'setValues',values); 
   


  
  
           }, 
   


  
          
   onSelect: 
   function() { 
   


  
              
   var _values = $(
   this).combobox(
   'getValues'); 
   


  
              
   var values = 
   new 
   Array(); 
   


  
              
   var _options = $(
   this).combobox(
   'options'); 
   


  
              
   var _data = $(
   this).combobox(
   'getData');
   /* 下拉框所有選項 */ 
   


  
              
   for(
   var j = 
   0; j < _values.length; j++){ 
   


  
                  
   for (
   var i = 
   0; i < _data.length; i++) { 
   


  
                      
   if (_data[i][_options.valueField] == _values[j]) { 
   


  
  
                           values.push(_values[j]) 
   


  
                          
   break; 
   


  
  
                       } 
   


  
  
                   } 
   


  
  
               } 
   


  
  
               $(
   this).combobox(
   'setValues',values); 
   


  
  
           } 
   


  
  
       });