Question

我希望使用jQuery自动完成功能显示一组功能结果（例如，能够使用箭头键选择），但不是显示在普通列表中的结果，而是希望它们显示为inline-block。< / p>

这是我的代码。

$( "#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);
};

DEMO：http://jsfiddle.net/M92kX/2/

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

1 个答案: