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

宽度在自动完成脚本中内联设置，UL高于您的 css 规则。你可以像这样超车：

$(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 回答