2

我在表单上有一个自动完成输入，但下拉列表的样式不正确，它看起来像一个普通的超链接项目符号列表。

这是自动完成创建的渲染隐藏列表：

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; top: 253px; left: 20px; width: 162px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-10" class="ui-corner-all" tabindex="-1">Austria</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-11" class="ui-corner-all" tabindex="-1">Australia</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-12" class="ui-corner-all" tabindex="-1">Aust-Timor</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-13" class="ui-corner-all" tabindex="-1">Austur-Kongo</a>
</li>
</ul>

所以看起来它有所有正确的样式类，但如果我查看 Chrome 中的 CSS，一些类没有被应用 - 即ui-menu

element.style {
display: none;
top: 253px;
left: 20px;
width: 162px;
}
Matched CSS Rules
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-content {
border: 1px solid #aaaaaa/*{borderColorContent}*/;
background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
color: #222222/*{fcContent}*/;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-size: 1.1em/*{fsDefault}*/;
}
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
.ui-front {
z-index: 100;
}
user agent stylesheetul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Inherited from body
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

我怎样才能找出为什么某些样式类没有被应用？

4

1 回答 1

1

您是否包含了 JQuery UI javascript，然后设置了 AutoComplete 功能？

在我的网站上，需要将以下 jQuery javascript 添加到放置自动完成字段的页面底部：

$(document).ready(function () {
    $(":input[data-autocomplete]").each(function() { 
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    });
});

还要确保在加载 JQuery 和 JQuery UI JS 文件后执行此代码。

缺口

于 2013-04-22T17:02:42.170 回答