jQuery UI自動完成下拉列表不正確樣式

我有一個窗體上的自動完成輸入，但下拉列表沒有正確的樣式，它看起來像一個普通的項目符號列表的超鏈接。jQuery UI自動完成下拉列表不正確樣式

這是自動完成創建渲染隱藏列表：

<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菜單

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

我怎樣才能找出爲什麼沒有被應用於一些風格類？

來源

2013-04-22 user380689

您是否包含了JQuery UI javascript，然後設置了自動完成功能？

我的網站上，下面的jQuery JavaScript需要被添加到自動完成場被放置在頁面的底部：

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

而且保證了jQuery和JQuery的負荷後執行該代碼UI JS文件。

尼克

來源

2013-04-22 17:02:42 Nick

是的，自動完成工作正常，只是在下拉式樣不起作用。發現這是因爲我錯過了包含jquery.ui.menu.css的樣式表。一旦添加了所有工作。 – user380689 2013-04-22 23:41:46

jQuery UI自動完成下拉列表不正確樣式

回答

相關問題