Jquery 自动完成样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5019663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery autocomplete styling
提问by mabounassif
While styling the jQuery autocomplete plugin, I get the following HTML code hardwired to my page:
在为 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>
How can I disable styling from being made through HTML and keep it done via CSS? I don't think my CSS files are overwriting that style.
如何禁用通过 HTML 制作的样式并通过 CSS 保持样式？我不认为我的 CSS 文件会覆盖那种样式。
Any help will do
任何帮助都可以
采纳答案by Robert Koritnik
jQuery autocomplete needs to set some inline styles to position the drop down list under the text box and size it equally.
jQuery 自动完成需要设置一些内联样式以将下拉列表定位在文本框下方并使其大小相等。
It doesn't set anything else, so it's completely up to you to provide visual styling of it by setting styles of those classes that are added to it (ie. ui-autocomplete).
它不设置任何其他内容，因此完全由您通过设置添加到它的那些类的样式来提供它的视觉样式（即。ui-autocomplete）。
Advice
建议
What I'm trying to tell you is this: set the visual aspects of the drop down list that gets displayed and don't worry about positioning and sizing inline styles.
我想告诉你的是：设置显示的下拉列表的视觉方面，不要担心定位和调整内联样式的大小。
Need to change positioning
需要改变定位
If you do need to override positioning and sizing of this element you can always set your styles as !important.
如果您确实需要覆盖此元素的定位和大小，您始终可以将样式设置为!important.
ul.ui-autocomplete
{
position: absolute;
left: 100px!important;
top: 0!important;
...
}
Additional edit
附加编辑
Setting margin-topdoesn't do anything since it calculates position every single time it displays the drop down. But you can try setting this:
设置margin-top不会做任何事情，因为它每次显示下拉菜单时都会计算位置。但是你可以尝试设置这个：
.ui-autocomplete
{
border-top:5px solid transparent!important;
}
This actually does the trick.
这实际上可以解决问题。
回答by ShayanK
This can be done by implementing some changes in the "open" method of Autocomplete.
这可以通过在自动完成的“打开”方法中实现一些更改来完成。
consider this example:
考虑这个例子：
$('#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 );
};
In this way by changing how and where your autocomplete appears. The 'ul' that shows autocomplete info has class 'ui-autocomplete' you can manipulate its css in this function to show the drop down the way you want.
通过这种方式更改自动完成的显示方式和位置。显示自动完成信息的 'ul' 具有类 'ui-autocomplete'，您可以在此函数中操作其 css 以按照您想要的方式显示下拉列表。
