0

我遵循了另一个问题的建议，但它对我不起作用。我正在使用 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();
}
4

1 回答 1

0

I am using Kendo UI ComboBox as editor for some SlickGrid columns. Please, check what I have done to fix the keyboard navigation behaviour.

First, some code to create the grid and a couple of auxiliary functions:

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

Then, inside the editor code, I call these functions in the init and destroy methods:

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

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

You can use this solution as a starting point to elaborate yours.

于 2012-12-16T18:39:22.653 回答