Jquery自动完成样式

Question

在设计jQuery自动完成插件的样式时，我将以下HTML代码硬连线到我的页面：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

如何通过HTML禁用样式并通过CSS完成它？ 我不认为我的CSS文件会覆盖那种风格。

任何帮助都可以

Answer 1

jQuery自动完成需要设置一些内联样式来定位文本框下方的下拉列表并对其进行相同的大小调整。

它没有设置任何其他内容，因此完全取决于您通过设置添加到其中的类的样式（即ui-autocomplete ）来提供它的视觉样式。

忠告

我想告诉你的是：设置显示的下拉列表的视觉方面，不要担心定位和调整内联样式。

需要改变定位

如果确实需要覆盖此元素的定位和大小调整，则可以始终将样式设置为!important 。

ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

额外编辑

设置margin-top不会执行任何操作，因为它会在每次显示下拉列表时计算位置。 但你可以试试这个：

.ui-autocomplete
{
    border-top:5px solid transparent!important;
}

这实际上是成功的。

Answer 2

这可以通过在自动完成的“开放”方法中实施一些更改来完成。

考虑这个例子：

$('#search_text_box').autocomplete({
        source: "<?= $this->baseUrl('items/autocomplete');?>",
        minLength: 2,
        search: function(){
            //$ulForResults.empty();
        },
        'open': function(e, ui) {
            $('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
            $('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
            $('.ui-autocomplete').append("<div id='autofill_results'><span>2,000</span> results found, showing <span>10</span></div>");
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
    };

通过这种方式更改自动填充的显示方式和位置。 显示自动完成信息的'ul'具有类'ui-autocomplete'，您可以在此函数中操作其css以显示您想要的下拉方式。