1

jQuery オートコンプリートを使用して機能的な結果セット (たとえば、矢印キーを使用して選択できるようにする) を表示したいのですが、通常のリストに結果を表示する代わりに、inline-block.

これが私が持っているコードです。

$( "#people_q" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#people_q" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#people_q" ).val( ui.item.label );
            $( "#people_q-id" ).val( ui.item.value );
            $( "#people_q-description" ).html( ui.item.desc );
            $( "#people_q-icon" ).attr( "src", "images/" + ui.item.icon );

            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };
});

試したスタイリングはこちら。

<style>
    .ui-autocomplete {
    width:600px !important;
}

    .ui-menu-item {
        width:200px !important;
        display:inline !important;  
        }
</style>
4

1 に答える 1

0

幅は、ULCSS ルールを上回るオートコンプリート スクリプト内でインラインに設定されます。次のようにオーバーライドできます。

$(selector).data("autocomplete")._resizeMenu=function() {
      /* do nothing and will be width of page*/
       $.noop();
      /* OR set width */
     var ul = this.menu.element;
      $(ul).width(600);
};

デモ: http://jsfiddle.net/M92kX/2/

于 2012-11-11T14:29:36.600 に答える