Question

I have an editor with an autocomplete textfield in slickGrid.
This looks (simplified) like this:

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

 };

Now, I have 2 problems:

1) The suggestion list is just a little narrower than the editor field. But I would like it even wider – possibly as wide as the widest item in it

2) I have disabled the up and down arrow keys for the entry field, but it does not focus the list so that the arrows would select the suggestion item.

Any thoughts what is wrong in my code?

Thanks for any help

Answer 1

to answer first question.

you can change the css of autocomplete class

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