Клавиши автозаполнения со списком вверх и вниз не работают в SlickGrid

Я создал специальный редактор SlickGrid под названием AutoCompleteEditor, чтобы зацепить связанные поля, которые должны быть полем со списком для автозаполнения. Пока он работает нормально, за исключением попытки прокручивать элементы вверх и вниз, нажимая клавиши вверх и вниз на клавиатуре. Я считаю, что проблема в том, что, поскольку это поле со списком автозаполнения встроено в SlickGrid, когда вы нажимаете клавишу «Вниз», оно переходит к ячейке прямо под активной ячейкой в ​​сетке.

Итак, мой вопрос: как я должен прокручивать вверх/вниз элементы в предложениях с помощью клавиш ВВЕРХ/ВНИЗ в поле со списком автозаполнения, встроенном в SlickGrid?

Примечание. Я знаю, как отключить левую и правую клавиши для работы, но клавиши вверх/вниз работают иначе, чем нажатие левой/правой клавиши.

Это исходный код пользовательского редактора:

function AutoCompleteEditor(args) {
     var $input;
     var defaultValue;
     var scope = this;
     var calendarOpen = false;


     this.init = function () {

       $input = $("<INPUT id='tags' class='editor-text' />");
       $input.width($(args.container).innerWidth() - 28);
       $input.appendTo(args.container);

        $input.bind("keydown.nav", function (e) {
        if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
          e.stopImmediatePropagation();
        }
        else if (e.keyCode === $.ui.keyCode.UP || e.keyCode === $.ui.keyCode.DOWN) {
         // e.stopImmediatePropagation();

         e.stopImmediatePropagation();
        }
       });


       $( "<a>" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .appendTo( args.container )
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "ui-corner-right ui-combobox-toggle" )

            .click(function() {

                // close if already visible
                if ( $input.autocomplete( "widget" ).is( ":visible" ) ) {
                    $input.autocomplete( "close" );
                    return;
                }

                // work around a bug (likely same cause as #5265)
                $( this ).blur();

                // pass empty string as value to search for, displaying all results

                $input.autocomplete( "search", "" );

                //achieve the positioning in case of scrolling 
                $(".ui-autocomplete").position({
                    my: "left top",
                    at: "left bottom",
                    of: $("#tags"),
                    collision: "flip flip"
                 });

                $input.focus().select();
            });

       $input.focus().select();

       $input.autocomplete({
            delay: 0,
            minLength: 0,
            source: args.column.options
        });

     };


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

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

     this.position = function (position) {

     $(".ui-autocomplete").position({
        my: "left top",
        at: "left bottom",
        of: $("#tags"),
        collision: "flip flip"
     });

    };

     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) {

        var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( state ) + "$", "i" ),
            valid = false;

        jQuery.each(args.column.options , function(index, value){

            if ( value.match( matcher ) ) {
                valid = true;
                item[args.column.field] = state;
                return false;
            }       
        });

        if ( !valid ) {
        // remove invalid value, as it didn't match anything
            $( this ).val( "" );
            $input.data( "autocomplete" ).term = "";
            item[args.column.field]="";
            return false;
        }

          // item[args.column.field] = matcher;
     };


     this.isValueChanged = function () {
       return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
     };


     this.validate = function () {
       return {
         valid: true,
         msg: null
       };
     };

     this.init();
   }

person buri kuri    schedule 29.08.2012    source источник
comment
Можете ли вы показать код?   -  person Ricardo Alvaro Lohmann    schedule 29.08.2012


Ответы (1)


Вызовите e.stopPropagation() в обработчиках нажатия клавиш.

person Tin    schedule 29.08.2012
comment
Спасибо за быстрый ответ! - person buri kuri; 30.08.2012