CODEWITHSUNDEEP
slickgrid
user1596343
user1596343

Reputation: 101

How to implement jQuery autocomplete in SlickGrid cell editor

I am setting up SlickGrid and need to have a column with an autoComplete editor. I tried it my modifying TextEditor or DateEditor. Nothing works.

Can anybody give me a rough sketch of an implementation by using the TextEditor as a basis?

Thanks a lot.

Upvotes: 5

Views: 3936

Answers (3)

Pythonic
Pythonic

Reputation: 2131

For completeness and in relation to ganeshk and arkadiy answers:

A user called Extazystas included ganeshk solution on github:

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

For autocomplete to work, you need to include arkadiy snippet in the init function as shown below:

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

Upvotes: 0

arkadiy kraportov
arkadiy kraportov

Reputation: 3729

Just a little addition to the previous answer. To make arrow keys work you may want to do stopPropagation. Here is an snippet from the editor's init method. It is in CoffeeScript but you will get the 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

Regular JQuery translation of the above snippet:

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

Upvotes: 5

ganeshk
ganeshk

Reputation: 5631

I did this in slick.editors.js - might have some bugs, but should work and help you get started:

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

Let me know if this helps.

Upvotes: 9

Related Questions