cómo implementar jQuery autocompletado en el editor de células SlickGrid

Question

Estoy fijando SlickGrid y necesitan tener una columna con un editor de Autocompletar. Lo intenté modificando TextEditor o DateEditor. Nada funciona.

¿Puede alguien darme un esbozo de una aplicación utilizando el TextEditor como base?

Muchas gracias.

Answer 1

hice esto en slick.editors.js - podría tener algunos errores, pero debería trabajar y ayudar a empezar:

$.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(); 
    } 

Déjame saber si esto ayuda.

Answer 2

Sólo un pequeño añadido a la respuesta anterior. Para hacer que las teclas de flecha funcionen, es posible que desee hacer stopPropagation. Aquí hay un fragmento del método init del editor. Es en CoffeeScript pero usted conseguirá la idea:

$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 

traducción regular JQuery del fragmento anterior:

$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

Para completar y en relación con ganeshk y respuestas Arkadiy:

Un usuario llamado Extazystas incluido solución ganeshk en github:

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

Para autocompletar funcione, es necesario incluir fragmento Arkadiy en la función de inicio como se muestra a continuación:

$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 
    });