javascript - JQuery 自动完成结果样式

Question

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

我尝试过:

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

我搜索并找不到结果使用的类是什么，因此我可以更改其字体大小，也许还有它的宽度。

谢谢。

使用: jQuery-UI AutoComplete

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

编辑2:我将使用 jQuery UI 的自动完成功能作为示例。

Check this to see the jQuery-UI auto-complete page

当我在首页示例的文本框中输入“Ja”后，Java 和 JavaScript 将作为结果出现在文本框下方的小框中。

这个小盒子是我想要更改其 CSS 的内容。上面示例中的代码仅更改了我的文本框 CSS(我根本不需要)。

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

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

解决方案正如齐克斯在对已接受答案的评论中所说，这就是解决方案。您只需将 ul.ui-autocomplete.ui-menu{width:300px} 放入 CSS 文件中即可。

这将使所有结果框 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 put ul.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

Answer 1

有关自动完成小部件样式的信息可以在此处找到:http://docs.jquery.com/UI/Autocomplete#theming

Fiddle

HTML

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

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 <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}