如何在SlickGrid单元格编辑器中实现jQuery自动完成

Question

我设置了SlickGrid并需要有一个带有autoComplete编辑器的列。 我试过它修改TextEditor或DateEditor。什么都没有

任何人都可以通过使用TextEditor作为基础给我一个实现的粗略草图？

非常感谢。

Answer 1

我这样做是在slick.editors.js - 可能有一些错误，但应该工作，并帮助您开始：

$.extend(true, window, { 
    "Slick": { 
     "Editors": { 
     "Auto": AutoCompleteEditor, 
     "Text": TextEditor, 
     "Integer": IntegerEditor, 
     "Date": DateEditor, 
     "YesNoSelect": YesNoSelectEditor, 
     "Checkbox": CheckboxEditor, 
     "PercentComplete": PercentCompleteEditor, 
     "LongText": LongTextEditor 
     } 
    } 
    }); 

    var availableTags = [ 
         "ActionScript", 
         "AppleScript", 
         "Asp", 
         "BASIC", 
         "C", 
         "C++", 
         "Clojure", 
         "COBOL", 
         "ColdFusion", 
         "Erlang", 
         "Fortran", 
         "Groovy", 
         "Haskell", 
         "Java", 
         "JavaScript", 
         "Lisp", 
         "Perl", 
         "PHP", 
         "Python", 
         "Ruby", 
         "Scala", 
         "Scheme" 
         ]; 

    function AutoCompleteEditor(args) { 
    var $input; 
    var defaultValue; 
    var scope = this; 
    var calendarOpen = false; 

    this.init = function() { 
     $input = $("<INPUT id='tags' class='editor-text' />"); 
     $input.appendTo(args.container); 
     $input.focus().select(); 
     $input.autocomplete({ 
      source: availableTags 
     }); 
    }; 

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

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

    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() { 
     return { 
     valid: true, 
     msg: null 
     }; 
    }; 

    this.init(); 
    } 

让我知道，如果这有助于。

Answer 2

只是除了前面的答案。要使箭头键正常工作，您可能需要执行stopPropagation。这里是编辑的init方法的一个片段。正是在CoffeeScript中，但你会得到的想法：上面代码片段的

$input.bind "keydown.nav", (e) -> 
    e.stopPropagation() if (e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || e.keyCode == $.ui.keyCode.ENTER) && $('ul.ui-autocomplete').is(':visible') 
    e.stopImmediatePropagation() if e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT 

定期JQuery的翻译：

$input.bind("keydown.nav", function(e) { 
    if ((e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || 
     e.keyCode == $.ui.keyCode.ENTER) 
     && $('ul.ui-autocomplete').is(':visible')) e.stopPropagation(); 

    if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT) 
     e.stopImmediatePropagation(); 
}); 

Answer 3

的完整性和有关ganeshk和长Arkadiy答案：

用户所谓的Extazystas包括github上的ganeshk解决方案：

https://gist.github.com/Extazystas/b64d98f072344ec395fa

对于自动完成工作，你需要在init函数长Arkadiy片断，如下图所示：

$input.focus().select(); 

// insert from here ------------------------------ 
$input.bind("keydown.nav", function(e) { 
    if ((e.keyCode == $.ui.keyCode.DOWN || e.keyCode == $.ui.keyCode.UP || 
     e.keyCode == $.ui.keyCode.ENTER) 
     && $('ul.ui-autocomplete').is(':visible')) e.stopPropagation(); 

    if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT) 
     e.stopImmediatePropagation(); 
}); 
// insert to here ------------------------------ 

    $input.autocomplete({ 
    source: availableOptions 
    });