jquery - 将 jQuery 自动完成项呈现为内联 block

Question

我想使用 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>

Answer 1

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/