Question

我在表单上有自动填充输入，但下拉列表没有正确设置样式，它看起来像是一个正常的项目符号超链接列表。

这是自动填充创建的呈现隐藏列表：

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

如何找出未应用某些样式类的原因？

Answer 1

您是否已包含JQuery UI javascript，然后设置自动完成功能？

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

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

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

尼克

jQuery UI自动完成下拉列表未正确设置样式

1 个答案: