如何使用JQuery UI創建一個自動完成SlickGrid編輯器1.9.2

Question

我遵循另一個問題的建議，但它不適用於我。我正在使用JQuery 1.8.3和JQuery UI 1.9.2

當我按箭頭鍵時，自動完成不會選擇下一個選項。爲什麼？

我試過每個事件處理函數stopPropagation。我使用了按鍵，鍵盤，鍵盤，處理程序。我甚至將我的輸入元素封裝在父標記中，並將stopPropagation放置在這些事件上，而箭頭鍵仍然不適用於autocomplete元素。他們只是試圖改變驗證器功能所阻止的單元。

$input.bind("keydown.nav", function (e) {function AutoCompleteEditor(args) { 
     var $input, 
       defaultValue, 
       scope = this; 

     this.init = function() { 
       $input = $("<INPUT type=text class='editor-text' />"); 
       $input.appendTo(args.container) 
         .focus() 
         .select() 
         .autocomplete({ 
           delay: 0, 
           minLength: 0, 
           source: args.column.options 
         }) 
         .bind("keydown.nav", function (e) { 
           if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) { 
             e.stopImmediatePropagation(); 
             e.stopPropagation(); 
           } else if (e.keyCode === $.ui.keyCode.UP || e.keyCode === $.ui.keyCode.DOWN) { 
             e.stopImmediatePropagation(); 
             e.stopPropagation(); 
           } 
         }) 
     }; 

     this.destroy = function() { 
       $input.autocomplete('destroy'); 
       $input.remove(); 
     }; 

     this.focus = function() { 
       $input.focus(); 
     }; 

     this.getValue = function() { 
       return $input.val(); 
     }; 

     this.setValue = function (val) { 
       $input.val(val); 
     }; 

     this.loadValue = function (item) { 
       defaultValue = item[args.column.field] || ""; 
       $input.val(defaultValue); 
       $input[0].defaultValue = defaultValue; 
       $input.select(); 
     }; 

     this.serializeValue = function() { 
       return $input.val(); 
     }; 

     this.applyValue = function (item, state) { 
       item[args.column.field] = state; 
     }; 

     this.isValueChanged = function() { 
       return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
     }; 

     this.validate = function() { 
       var val = $input.val(); 
       return { 
         valid: args.column.options.indexOf(val) > -1, 
         msg: null 
       }; 
     }; 

     this.init(); 
} 

Answer 1

我使用Kendo UI ComboBox作爲一些SlickGrid列的編輯器。請檢查我所做的修復鍵盤導航行爲。

首先，一些代碼來創建網格和幾個輔助功能：

var data = []; // some data 
var columns = []; // some columns 
var options = { 
    editable: true, 
    autoEdit: false 
}; 
var grid = new Slick.Grid('#myGrid', data, columns, options); 
grid.render(); 

function editing_keydown(e, args) { 
    if (!e.shiftKey && !e.altKey && !e.ctrlKey) { 
     if (e.which >= 37 && e.which <= 40) { 
      e.stopImmediatePropagation(); 
     } 
    } 
} 

function disableGridCellNavigation() { 
    grid.onKeyDown.subscribe(editing_keydown); 
}; 

function enableGridCellNavigation() { 
    grid.onKeyDown.unsubscribe(editing_keydown); 
}; 

然後，的編輯代碼，我呼籲在初始化這些功能裏面和破壞方法：

this.init = function() { 
    // initialization stuff 
    // last line: 
    disableGridCellNavigation(); 
}; 

this.destroy = function() { 
    // termination stuff 
    // last line: 
    enableGridCellNavigation(); 
}; 

您可以使用此解決方案作爲起點精心製作你的。