JQuery自动完成结果样式

我正在尝试从自动完成结果中更改样式。

我试过了：

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

我搜索并无法找出结果使用的类，以便我可以更改其字体大小和宽度。

谢谢。

使用： jQuery-UI AutoComplete

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

EDIT2：我将使用jQuery UI中的自动完成function作为示例。

选中此项以查看jQuery-UI自动完成页面

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

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

我不知道我现在是不是很清楚。 我希望如此，但如果没有，请告诉我; 如果需要我会更加努力地展示我的问题。

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

解决方案正如Zikes在对已接受答案的评论中所说，这是解决方案。 你只需要在你的CSS文件中放入ul.ui-autocomplete.ui-menu{width:300px} 。

这将使所有结果框css具有width:300px （如样本）。

我忘记了页面加载时结果对象不存在，因此无法通过调用$('...').css() 。 您实际上需要在CSS文件中放置ul.ui-autocomplete.ui-menu{width:300px} ，以便在生成结果并将其插入页面时生效。
– Zikes

Answer 1

有关自动填充小部件样式的信息，请访问： http ： //docs.jquery.com/UI/Autocomplete#theming

小提琴

HTML

jQuery的

 $('#auto').autocomplete({'source': ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz'] }); 

CSS

 ul.ui-autocomplete.ui-menu{width:400px} /* targets the first result's  element, remove the a at the end to target the li itself */ ul.ui-autocomplete.ui-menu li:first-child a{ color:blue; } 

Answer 2

我可以通过将此css添加到文档的 （自动完成javascript上方）来进行调整。

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

Answer 3

如果您正在使用官方jQuery ui自动完成（我在1.8.16）并想手动定义宽度，您可以这样做。

如果您正在使用缩小版本（如果没有，则通过匹配_resizeMenu手动查找），找到…

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

…并替换为（在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()))} 

…你现在可以在.autocomplete（{width：200}）函数中包含一个宽度值，jQuery将尊重它。 如果没有，它将默认为计算它。

Answer 4

您知道有两种优化代码的选项：

而不是这个：

 $('.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'});