jquery - 单独更改 jquery-ui 自动完成小部件的宽度

Question

我在一页上使用多个 jquery-ui 自动完成小部件，并希望能够单独设置每个小部件的宽度。目前，我是这样做的:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

这并不是真正的解决方案，因为用户能够以不同的顺序触发各种自动完成，而这段代码只是根据它们添加到 DOM 的顺序来设置样式。

当触发自动完成时，它似乎创建了一个 <ul>然后将其置于触发它的输入框下方。不幸的是，我在这个生成的 <ul> 中找不到任何唯一标识符。锁定并应用一些 CSS。

我的问题不同于 this one ，因为我只使用默认的自动完成，而不是自动完成组合框。

此外，深入研究自动完成 <ul>并且将不同的自动完成框宽度与列表中的值匹配也不起作用，因为这些值是动态生成的。

有什么想法吗？

Answer 1

我使用可用的“打开”事件解决了这个问题。我需要一种动态设置宽度以及其他元素的方法，并且不需要额外的标记。

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});