Mic*_*res 18 javascript jquery autocomplete
我正在尝试从自动完成结果中更改样式.
我试过了:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
我搜索并无法找出结果使用的类,以便我可以更改其字体大小和宽度.
谢谢.
使用: jQuery-UI自动完成
编辑:我需要从我的结果中更改css,这来自我的JSON,而不是来自输入.您发布的代码仅更改输入,而不是结果.这就是为什么我要求结果列表使用的类(至少,我相信这是一个列表).我试图从ff使用fb而无法找到它.再次感谢您的耐心等待.
EDIT2:我将使用jQuery UI中的自动完成功能作为示例.
在我从首页示例的文本框中键入"Ja"后,Java和JavaScript将显示为结果,位于文本框下方的小框中.
这个小盒子就是我想要改变的CSS.我上面的示例中的代码只更改了我的文本框CSS(我根本不需要).
我不知道我现在是不是很清楚.我希望如此,但如果没有,请告诉我; 如果需要我会更加努力地表明我的问题.
我需要的是包含结果项的UL类.
解决方案
正如Zikes在对已接受答案的评论中所说,这是解决方案.你只需要ul.ui-autocomplete.ui-menu{width:300px}输入你的CSS文件.
这将使得所有结果框css都有width:300px(如样本).
我忘记了页面加载时结果对象不存在,因此无法通过调用找到并将其作为目标
$('...').css().您实际上需要放入ul.ui-autocomplete.ui-menu{width:300px}CSS文件,以便在生成结果并将其插入页面时生效.
- Zikes
Zik*_*kes 20
有关自动填充小部件样式的信息可以在这里找到: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;
}
小智 14
我能够通过将此css添加到<head>文档(在自动完成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>