slickgrid - SlickGridセルエディタでjQueryオートコンプリートを実装する方法

Question

SlickGridを設定していますが、オートコンプリートエディタを備えた列が必要です。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

オートコンプリートを機能させるには、以下に示すように、初期化関数に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
  });