Question

我创建了一个名为AutoCompleteEditor的自定义SlickGrid编辑器来挂钩相关字段，这些字段必须是自动完成组合框。它到目前为止工作正常，除了尝试通过按键盘上的向上和向下键向上和向下滚动项目。我相信问题是因为这个自动完成组合框嵌入在SlickGrid中，当你按下Down时，它会导航到网格中activeCell正下方的单元格。

所以我的问题是如何在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();
   }

Answer 1

在你的keydown处理程序中调用e.stopPropagation（）。

自动完成Combobox向上和向下键在SlickGrid中不起作用

1 个答案: