Question

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

我试过了：


// 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中的自动填充为例。

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

在我从首页示例的文本框中键入“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

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

Answer 2

我可以通过将此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>

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

JQuery自动完成结果样式

4 个答案: