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文件并没有覆盖那个样式。

任何帮助都可以。

- mabounassif

---

插件可能需要这些样式，并调整它们以满足插件的行为。 - Jeff

我想将我的结果<ul>列表显示与搜索框分开...有什么办法可以做到这一点吗？ - mabounassif

你能详细说明一下“从我的搜索框中显示”的意思吗？ - Robert Koritnik

结果列表通常附加在我的搜索文本框底部...我希望在搜索文本框和包含结果列表的框之间有5像素的间隙。 - mabounassif

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;
}

这实际上就是解决问题的方法。

- Robert Koritnik

---

我想将我的结果<ul>列表显示与搜索框分开...有什么办法可以做到这一点吗？ 我只想在它们之间留出5个自由像素。 - mabounassif

@Mahmud：你尝试过设置margin-top: 5px;来在搜索框和列表之间添加一些空间吗？ - Robert Koritnik

@Mahmud：你说得对。每次显示下拉菜单时，它会计算位置，因此也会根据边距值进行调整。 - Robert Koritnik

还是不行，但感谢你的帮助 :) 我想我的环境里还有其他问题。 - mabounassif

@Mahmoud：如果你的背景是统一的颜色，你可以设置一个特定的边框颜色，而不是将其设置为透明。 - Robert Koritnik

@Robert：我调整了教材搜索框的边框，而不是自动完成...这种方式有点奇怪，但至少它能工作 :) 希望有人能想出更正式的解决方法...或者也许这就是 CSS 的美妙之处。 - mabounassif

Answer 2

这可以通过在Autocomplete的“open”方法中实施一些更改来完成。考虑以下示例：

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

通过更改自动完成出现的方式和位置，您可以在此函数中操作“ui-autocomplete”类的css以显示您想要的下拉菜单。

- ShayanK