如何使用 JQuery UI 1.9.2 制作自动完成 SlickGrid 编辑器

Question

我遵循了另一个问题的建议，但它对我不起作用。我正在使用 JQuery 1.8.3 和 JQuery UI 1.9.2

当我按下箭头键时，自动完成不会选择下一个选项。为什么？

我在每个事件处理程序上都尝试过 stopPropagation。我使用过 keypress、keyup、keydown、处理程序。我什至将输入元素包装在父标签中，并将 stopPropagation 放在这些事件上，而箭头键仍然无法在自动完成元素上使用。他们只是试图更改验证器功能随后阻止的单元格。

$input.bind("keydown.nav", function (e) {function AutoCompleteEditor(args) {
        var $input,
                defaultValue,
                scope = this;

        this.init = function () {
                $input = $("<INPUT type=text class='editor-text' />");
                $input.appendTo(args.container)
                        .focus()
                        .select()
                        .autocomplete({
                                delay: 0,
                                minLength: 0,
                                source: args.column.options
                        })
                        .bind("keydown.nav", function (e) {
                                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                                        e.stopImmediatePropagation();
                                        e.stopPropagation();
                                } else if (e.keyCode === $.ui.keyCode.UP || e.keyCode === $.ui.keyCode.DOWN) {
                                        e.stopImmediatePropagation();
                                        e.stopPropagation();
                                }
                        })
        };

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

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

        this.getValue = function () {
                return $input.val();
        };

        this.setValue = function (val) {
                $input.val(val);
        };

        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 () {
                var val = $input.val();
                return {
                        valid: args.column.options.indexOf(val) > -1,
                        msg: null
                };
        };

        this.init();
}

Answer 1

我正在使用 Kendo UI ComboBox 作为一些 SlickGrid 列的编辑器。请检查我为修复键盘导航行为所做的工作。

首先，创建网格的一些代码和几个辅助函数：

var data = []; // some data
var columns = []; // some columns
var options = {
    editable: true,
    autoEdit: false
};
var grid = new Slick.Grid('#myGrid', data, columns, options);
grid.render();

function editing_keydown(e, args) {
    if (!e.shiftKey && !e.altKey && !e.ctrlKey) {
        if (e.which >= 37 && e.which <= 40) {
            e.stopImmediatePropagation();
        }
    }
}

function disableGridCellNavigation() {
    grid.onKeyDown.subscribe(editing_keydown);
};

function enableGridCellNavigation() {
    grid.onKeyDown.unsubscribe(editing_keydown);
};

然后，在 editor 代码 中，我在 init 和 destroy 方法中调用这些函数：

this.init = function() {
    // initialization stuff
    // last line:
    disableGridCellNavigation();
};

this.destroy = function () {
    // termination stuff
    // last line:
    enableGridCellNavigation();
};

您可以将此解决方案作为起点来阐述您的解决方案。