Javascript JQuery 自动完成结果样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5409788/
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 result style
提问by Michel Ayres
I'm trying to change the style from my AutoComplete result.
我正在尝试从我的自动完成结果中更改样式。
I tried:
我试过：
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
我搜索并找不到结果使用的类是什么，因此我可以更改其字体大小和宽度。
Thanks.
谢谢。
Using: jQuery-UI AutoComplete
使用： jQuery-UI 自动完成
EDIT:I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
编辑：我需要从我的结果中更改 css，它来自我的 JSON，而不是来自输入。您发布的代码仅更改输入，而不更改结果。这就是为什么我要求结果列表使用的类（至少，我相信这是一个列表）。我试图从 ff 使用 fb，但找不到它。再次感谢您的耐心等待。
EDIT2:I'll use the autocomplete from jQuery UI as example.
EDIT2：我将使用 jQuery UI 中的自动完成功能作为示例。
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
在首页示例的文本框中键入“Ja”后，Java 和 JavaScript 将作为结果出现在文本框下方的小框中。
Thislittle box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
这个小盒子就是我想要改变 CSS 的地方。上面示例中的代码只更改了我的文本框 CSS（我根本不需要）。
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
不知道我现在说清楚了没有。我希望如此，但如果没有，请告诉我；如果需要显示我的问题，我会更加努力。
The class for the UL that will contain the result items is what I need.
将包含结果项的 UL 类是我所需要的。
SOLUTIONAs Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px}in your CSS file.
解决方案正如 Zikes 在他对已接受答案的评论中所说，这是解决方案。你只需要放入ul.ui-autocomplete.ui-menu{width:300px}你的 CSS 文件。
This will make all the the results box css have width:300px(like the sample).
这将使所有结果框 css 具有width:300px（如示例）。
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to
$('...').css(). You'll actually need to putul.ui-autocomplete.ui-menu{width:300px}in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes
我忘记了结果对象在页面加载时不存在，因此调用
$('...').css(). 您实际上需要放入ul.ui-autocomplete.ui-menu{width:300px}CSS 文件，以便在生成结果并将其插入页面时生效。
– 齐克斯
回答by Zikes
Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
可以在此处找到有关自动完成小部件样式的信息：http: //docs.jquery.com/UI/Autocomplete#theming
HTML
HTML
<input type="text" id="auto">
jQuery
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}
回答by Chris M
I was able to adjust by adding this css to the <head>of the document (above the autocomplete javascript).
我可以通过将这个 css 添加到<head>文档的（在自动完成 javascript 之上）进行调整。
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
以下某些内容可能比其他内容更相关。如果更改这些会影响您不希望影响的其他元素，您可以使其特定于自动完成输入。
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>
回答by Harry B
If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
如果您使用的是官方 jQuery ui 自动完成功能（我使用的是 1.8.16）并且想要手动定义宽度，您可以这样做。
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
如果您使用的是缩小版本（如果没有，则通过匹配 _resizeMenu 手动查找），找到...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
...并将其替换为（在 Math.max 之前添加 this.options.width||） ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.
...您现在可以在 .autocomplete({width:200}) 函数中包含一个宽度值，jQuery 会遵守它。如果没有，它将默认计算它。
回答by The Muffin Man
Just so you know you have two options for optimizing your code:
只是为了让您知道您有两种优化代码的选项：
Instead of this:
取而代之的是：
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
你可以这样做：
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
或者更好的是你应该这样做：
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
