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

 };

现在，我有两个问题：

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

jQuery自动完成slickGrid setWidth的建议

2 个答案: