问题描述
我正在尝试更改自动完成结果的样式.
I'm trying to change the style from my AutoComplete result.
我试过了:
// 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.
谢谢.
我需要从我的结果中更改 css,它来自我的 JSON,而不是来自输入.您发布的代码仅更改输入,而不更改结果.这就是为什么我要求结果列表使用的类(至少,我相信这是一个列表).我试图从 ff 使用 fb,但找不到它.再次感谢您的耐心等待.
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.
我将使用 jQuery UI 中的自动完成功能作为示例.
I'll use the autocomplete from jQuery UI as example.
在首页示例的文本框中键入Ja"后,Java 和 JavaScript 将作为结果显示在文本框下方的小框中.
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.
这个小盒子就是我想要改变 CSS 的地方.上面示例中的代码仅更改了我的文本框 CSS(我根本不需要).
This little 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).
我不知道我现在是否清楚.我希望如此,但如果没有,请告诉我;如果需要展示我的问题,我会更加努力.
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.
我需要包含结果项的 UL 类.
解决方案正如 Zikes 在他对已接受答案的评论中所说,这是解决方案.您只需将 ul.ui-autocomplete.ui-menu{width:300px}
放入 CSS 文件中.
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.
这将使所有结果框 css 具有 width:300px
(如示例).
This will make all the the results box css have width:300px
(like the sample).
我忘记了结果对象在页面加载时不存在,因此不会通过调用 $('...').css()
找到和定位.您实际上需要将 ul.ui-autocomplete.ui-menu{width:300px}
放在 CSS 文件中,以便在生成结果并将其插入页面时生效.
– Zikes
推荐答案
可以在此处找到有关自动完成小部件样式的信息:http://docs.jquery.com/UI/Autocomplete#theming
Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
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;
}
这篇关于JQuery 自动完成结果样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!