jQuery autocomplete in slickGrid setWidth предложений

Question

У меня есть редактор с текстовым полем автозаполнения в slickGrid. Это выглядит (упрощенный), как это:

function AutoCompleteEditor(args) { 
var $input; 

this.init = function() { 
    $input = $("<INPUT id='tags' class='editor-text' />"); 
    $input.appendTo(args.container); 
    $input.bind("keydown.nav", function (e) { 
     if (e.which === $.ui.keyCode.LEFT || e.which === $.ui.keyCode.RIGHT) { 
      e.stopImmediatePropagation(); 
     } 
     if((e.which === $.ui.keyCode.DOWN) || (e.which === $.ui.keyCode.UP)){ 
      e.stopImmediatePropagation(); 
     } 
     if(e.which === $.ui.keyCode.RETURN){ 
      e.stopImmediatePropagation(); 
     } 
     }) 
    $input.focus().select(); 

    $input.autocomplete({ 
    minLength: 2, 
    autoFocus: true, 
    source: function(request, response) { 
       ..... 
      }, 
     focus: function(event, ui) { 
      return false; 
     }, 
     select: function(event, ui) { 
      event.target.value = ui.item.label; 
      return false; 
     }, 
     open: function(event, ui) { 
      $(this).autocomplete("widget") 
      .find("ui-menu-item-alternate") 
       .removeClass("ui-menu-item-alternate") 
      .end() 
      .find("li.ui-menu-item:odd a") 
       .addClass("ui-menu-item-alternate"); 
     }, 
     appendTo: args.container, 
     width: 500, 
    }); 

}; 

Теперь у меня есть 2 проблемы:

1) Список предложение является лишь немного уже, чем поле редактора. Но я бы хотел, чтобы он был еще шире - возможно, такой широкий, как самый широкий элемент в нем

2) Я отключил клавиши со стрелками вверх и вниз для поля ввода, но он не сфокусирует список так, чтобы стрелки выбирали пункт предложения.

Любые мысли, что не так в моем коде?

Спасибо за любую помощь.

Answer 1

ответить на первый вопрос.

вы можете изменить CSS автозаполнения класса

<style type="text/css"> 
.ui-autocomplete { 
    max-height: 250px; 
    max-width: 200px; 
    overflow-y: auto; 
    /* prevent horizontal scrollbar */ 
    overflow-x: hidden; 

} 
/* IE 6 doesn't support max-height 
* we use height instead, but this forces the menu to always be this tall 
*/ 
* html .ui-autocomplete 
{ 
    height: 250px; 
    width: 200px; 
} 

Answer 2

//Please find below code make it up and down event null 
$.widget("ui.autocomplete", { 
options: { 
    appendTo: "body", 
    autoFocus: false, 
    delay: 300, 
    minLength: 1, 
    position: { 
     my: "left top", 
     at: "left bottom", 
     collision: "none" 
    }, 
    source: null 
}, 

pending: 0, 

_create: function() { 
    var self = this, 
     doc = this.element[ 0 ].ownerDocument, 
     suppressKeyPress; 
    this.isMultiLine = this.element.is("textarea"); 

    this.element 
     .addClass("ui-autocomplete-input") 
     .attr("autocomplete", "off") 
     // TODO verify these actually work as intended 
     .attr({ 
      role: "textbox", 
      "aria-autocomplete": "list", 
      "aria-haspopup": "true" 
     }) 
     .bind("keydown.autocomplete", function(event) { 
if (self.options.disabled || self.element.propAttr("readOnly")) { 
       return; 
      } 

      suppressKeyPress = false; 
      var keyCode = $.ui.keyCode; 
      switch(event.keyCode) { 
      case keyCode.PAGE_UP: 
       //self._move("previousPage", event); 
       break; 
      case keyCode.PAGE_DOWN: 
       //self._move("nextPage", event); 
       break; 
      case keyCode.UP: 
       //self._keyEvent("previous", event); 
       break; 
      case keyCode.DOWN: 
       //self._keyEvent("next", event); 
       break; 
      case keyCode.ENTER: 
      case keyCode.NUMPAD_ENTER: 
       // when menu is open and has focus 
       if (self.menu.active) { 
        // #6055 - Opera still allows the keypress to occur 
        // which causes forms to submit 
        suppressKeyPress = true; 
        event.preventDefault(); 
       } 
       //passthrough - ENTER and TAB both select the current element 
      case keyCode.TAB: 
       if (!self.menu.active) { 
        return; 
       } 
       self.menu.select(event); 
       break; 
      case keyCode.ESCAPE: 
       self.element.val(self.term); 
       self.close(event); 
       break; 
       // changes done by justin close the menu if text is empty 
       case keyCode.BACKSPACE:     
       break; 
       //****************end ******************* 
      default: 
       // keypress is triggered before the input value is changed 
       clearTimeout(self.searching); 
       self.searching = setTimeout(function() { 
        // only search if the value has changed 
        //if (self.term != self.element.val()) { 
         self.selectedItem = null; 
         self.search(null, event); 
        //} 
       }, self.options.delay); 
       break; 
      } 
     })