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以显示您想要的下拉列表。

Jquery自动完成样式

2 个答案:

建议

需要改变定位

其他编辑