自動完成組合框上下鍵在SlickGrid中不起作用

Question

我創建了一個名爲AutoCompleteEditor的自定義SlickGrid編輯器來掛接需要成爲自動完成組合框的相關字段。它迄今爲止工作正常，除了嘗試通過按下鍵盤上的向上和向下鍵來上下滾動項目。我相信這個問題是因爲這個自動完成組合框被嵌入到SlickGrid中，當你鍵入向下時，它導航到網格中activeCell正下方的單元格。

所以我的問題是我應該如何向上/向下滾動向上/向下的項目中的向上/向下按鍵在自動完成組合框中嵌入SlickGrid？

注：我知道如何禁用左鍵和右鍵功能，但上/下鍵功能與左/右鍵不同。

這是自定義編輯器的源代碼：）在你的keydown處理

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

呼叫e.stopPropagation（。