1

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) 入力フィールドの上下矢印キーを無効にしましたが、矢印が提案項目を選択するようにリストにフォーカスしていません。

私のコードで何が間違っていると思いますか?

助けてくれてありがとう

4

2 に答える 2

0

最初の質問に答えます。

オートコンプリート クラスの 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;
}
于 2012-08-16T15:41:56.580 に答える
0 
//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;
            }
        })
于 2012-08-16T15:57:29.840 に答える