将 jQuery 自动完成项呈现为内联块答案

【问题标题】：Rendering jQuery autocomplete items as inline block将 jQuery 自动完成项呈现为内联块
【发布时间】：2012-10-31 03:48:02
【问题描述】：

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

【问题讨论】：

标签： jquery css jquery-ui autocomplete jquery-ui-autocomplete

【解决方案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/

【讨论】：