Javascript JQuery自动完成结果样式

我正在尝试更改自动完成结果的样式

我试过：

// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

我搜索，但找不到结果使用的类是什么，所以我可以更改它的字体大小和宽度

谢谢

使用：

编辑：我需要更改来自JSON而非输入结果的css。您发布的代码只更改输入，而不更改结果。这就是为什么我要求使用结果列表所使用的类（至少，我认为这是一个列表）。我试图从ff使用fb，但找不到它。再次感谢你的耐心

EDIT2:我将使用jqueryui的自动完成作为示例

在首页示例的文本框中键入“Ja”后，Java和JavaScript将作为结果显示在文本框下方的小框中

这个小盒子就是我想要改变的CSS。上面示例中的代码只更改了文本框CSS（我根本不需要）

我不知道我现在是否清楚。我希望如此，但如果没有，请让我知道；如果需要的话，我会更加努力的

包含结果项的UL类是我需要的。

解决方案 正如齐克斯在对公认答案的评论中所说的那样，以下是解决方案。您只需要在CSS文件中放入

ul.ui autocomplete.ui菜单{width:300px}

这将使所有结果框css的宽度为300px（与示例相同）

我忘记了页面加载中不存在results对象，因此调用

$（'…'）.css（）

将找不到该对象并将其作为目标。实际上，您需要在CSS文件中放入

ul.ui autocomplete.ui菜单{width:300px}

，以便在生成结果并插入页面时生效。
-齐克斯

---

有关设置自动完成小部件样式的信息，请参见：

HTML

<input type="text" id="auto">

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

ul.ui自动完成.ui菜单{width:400px}
/* 
以第一个结果的元素为目标，
移除末端的a以对准li本身
*/
ul.ui-autocomplete.ui-menu li：第一个孩子a{
颜色：蓝色；
}

让您知道优化代码有两种选择：

与此相反：

$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

您可以这样做：

$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');

或者更好，你应该这样做：

$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});

---

如果您使用的是正式的jQueryUIAutoComplete（我使用的是1.8.16），并且希望手动定义宽度，那么您可以这样做

如果您使用的是缩小版（如果不是，则通过匹配_resizeMenu手动查找），请查找

…并将其替换为（在Math.max之前添加此.options.width | |）

---

。。。现在，您可以在.autocomplete（{width:200}）函数中包含一个width值，jQuery将执行该值。如果没有，它将默认计算它。

我可以通过将这个css添加到文档的

中（在自动完成javascript之上）来进行调整

以下部分可能比其他部分更相关。如果更改这些内容会影响您不希望影响的其他元素，则可以将其特定于自动完成输入

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

/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui自动完成{位置：绝对；光标：默认；背景：#CCC}
/*变通办法*/
ui autocomplete{width:1px；}/*如果没有这个，菜单在IE6中会扩展到100%*/
.ui菜单{
列表样式：无；
填充：2px；
保证金：0；
显示：块；
浮动：左；
}
.ui菜单.ui菜单{
利润上限：-3px；
}
.ui菜单.ui菜单项{
保证金：0；
填充：0；
缩放：1；
浮动：左；
清除：左；
宽度：100%；
}
.ui菜单.ui菜单项a{
文字装饰：无；
显示：块；
填料：2em.4em；
线高：1.5；
缩放：1；
}
.ui菜单.ui菜单项a.ui-state-hover，
.ui菜单.ui菜单项a.ui-state-active{
字体大小：正常；
保证金：-1px；
}

请提供更多信息或示例来源。您好@user667776，我在这里编辑了两条新闻信息，希望现在一切正常。谢谢你给我的提示来增加我关于我的问题的信息。附言：我只是想说清楚。答案在接受答案的注释上。或var mystyle={fontSize:'10px'，width:'300px'}$（'.ui自动完成输入'）.css（mystyle）；对不起，尼克，我想我传递了错误的信息。这些代码改变了我的输入，而不是结果列表。我想改变结果。不过还是要谢谢你的拍摄谢谢你的样品马克，我很感激。但就像我对尼克说的，这不是我想要的信息。无论如何谢谢=）我想利用这段时间回应随机的反对票。坦率地说，这是愚蠢的，对任何人都没有帮助，包括你自私的自己。通过解释你为什么投了否决票，你可能会帮助作者改进他们的答案，或者省去其他人尝试它的麻烦，因为它不起作用。我不喜欢在尝试谷歌或文档之前先来这里询问。我没有发现什么可以说明什么课是结果课。我尝试了示例中显示的“.ui自动完成输入”，但没有成功。我有点迷路了。如果我错过了什么，请告诉我。再次感谢。@Nymos在

ui自动完成输入之后的
ul
标记就是它生成的结果。通过定位
ul.ui autocomplete.ui菜单
，您应该可以得到您所需要的。@Zikes，感谢您的快速重播^。^但它不起作用。我使用
$（'.ul.ui autocomplete.ui menu'）.css（'width'，'300px'）没有发生任何事情，我在ff错误控制台中检查，那里没有错误。@Nymos从选择器中删除第一个
，因为它使用
ui自动完成
和
ui菜单
类指向
ul
元素。该行应类似于
$（'ul.ui autocomplete.ui menu'）.css（'width'，'300px'）@Zikes再次感谢您对我的帮助
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

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