How to implement jQuery autocomplete in SlickGrid cell editor

Question

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.

score 9 · Accepted Answer · answered Aug 13 '12 at 20:19

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.

Hi ganeshk, That was exactly what I wanted... thanks... however... it allways reports in firebug console "$input.autocomplete is not a function". Whatever I did, it does not find autocomplete. As I read, autocompare is part of jquery-ui-1.8. Right? Any hint what I could do? — user1596343, Aug 14 '12 at 09:04
Glad to be of help - and welcome to SO! Just include `jquery-ui.js` and `jquery-ui.css` in your HTML. You can download both from http://www.jqueryui.com — ganeshk, Aug 14 '12 at 12:34
I hope this answered your question. Would you mind accepting this as your answer then? — ganeshk, Aug 15 '12 at 13:14
NP. You'll need to mark this as an answer. Check the FAQ if you need help on how to do this - http://stackoverflow.com/faq#howtoask — ganeshk, Aug 16 '12 at 15:44

score 5 · Answer 2 · edited Apr 03 '13 at 01:16

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

score 0 · Answer 3 · answered Sep 25 '15 at 08:25

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

How to implement jQuery autocomplete in SlickGrid cell editor

3 Answers3