分别更改jquery-ui自动完成小部件的宽度
我正在一个页面上使用多个jquery-ui自动完成小部件，并希望能够单独设置每个小部件的宽度。 目前，我这样做：
$($('.ui-autocomplete')[0]).width(150); $($('.ui-autocomplete')[1]).width(105); $($('.ui-autocomplete')[2]).width(80); 这不是真正的解决方案，因为用户能够以不同的顺序触发各种自动复合，并且此代码仅根据它们添加到DOM的顺序对它们进行设置。
触发自动完成时，它似乎创建了一个
- ，然后将其放在触发它的输入框下。 不幸的是，我在这个生成的
找不到任何唯一标识符来锁定并应用一些CSS。
我的问题与此问题不同，因为我只使用默认的自动完成function，而不是自动完成combobox。
此外，挖掘自动完成
- 并将不同的自动完成框宽度与列表中的值匹配也不起作用，因为这些值是动态生成的。
有任何想法吗？
我使用’open’事件解决了这个问题。 我需要一种动态设置宽度的方法，以及其他项目，并且不需要额外的标记。
$('#input').autocomplete({ source: mysource, appendTo: '#div', open: function() { $('#div .ui-menu').width(300) } });
我喜欢luqui的回答。 但是，如果您处于无法使用appendTofunction的情况（可能是由于溢出隐藏等），您可以使用下面的代码确保您正在更改正确的列表。
$('#input').autocomplete({ source: mysource, open: function() { $('#input').autocomplete("widget").width(300) } });
参考： http ： //docs.jquery.com/UI/Autocomplete#method-widget
如果你有多个使用自动完成的控件，一个相当优雅的解决方案是在最后一刻检索附加到控件的widget并修改它的CSS：
$(document).ready(function() { $("input#Foo").autocomplete({ source: source }); $("input#Bar").autocomplete({ source: source, open: function(event, ui) { $(this).autocomplete("widget").css({ "width": 400 }); } }); });
查看演示 。
如上所述，自动完成列表的宽度是在最后一刻计算的，因此您必须在open事件中对其进行修改。
您可以在上附加“ui-menu”小部件，该小部件具有关于$('#myinput').data("autocomplete").menu 。 所以要改变你可以使用的宽度
$('#myinput').autocomplete({ source: yourUrlOrOtherSource, open: function () { $(this).data("autocomplete").menu.element.width(80); } });
你可以在div中包装触发自动完成的输入框，给div一个特定的id，然后将auto complete ul附加到该div而不是文档正文。 这样你就可以用基于div的css来定位它。
不使用额外的Javascript代码，您可以使用1个简单的CSS行：
那么为什么这适用于最小宽度 ？
只是因为width被JS覆盖，有时甚至使用open: function(event, ui) { ... }解决方案（如rkever的答案 ，在我的情况下不起作用）。 但是， min-width 不会被覆盖 ，所以它派上用场。
此外，如果您不想使用 !important ，则可以使用其余类进一步详细说明该规则：
.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px}
这避免了我进一步的JS黑客攻击，希望它有所帮助！
我喜欢@MartinLögdberg的答案但是如果你使用固定大小的宽度而不是在返回的结果上做一些花哨的数学来设置宽度，那么你也可以在CSS中设置宽度
ul .ui-autocomplete { width: 50%; }
对MartinLögdberg的改进回答。 这对我来说效果更好，因为我在页面上有很多文本框
$('.some-class').each(function(){ var txt = $(this); txt.autocomplete({ source: mysource, open: function() { txt.autocomplete("widget").width(txt.outerWidth()); } }); });
阅读API，我只是在父输入的div中添加一个类ui-front ，这样可以正常工作。
看到这里 ：
[…]输入字段的父母将被检查一类ui-front 。 如果找到具有ui-front类的元素， 则菜单将附加到该元素 。 无论值如何，如果未找到任何元素，菜单将附加到正文。
附加元素确定菜单的位置和宽度。
从jQuery UI 1.10开始，使用小部件工厂重写了自动完成小部件 。 作为其中的一部分，自动完成现在包含_resizeMenu扩展点，在显示之前调整菜单大小时调用该扩展点。
$('#input').autocomplete({ source: mysource, appendTo: '#div', _resizeMenu: function() { this.menu.element.outerWidth( 500 ); } });
我设法通过向自动完成菜单添加浮点数来解决这个问题。
.ui-autocomplete { float: left; }
由于自动完成菜单位于absolute位置并且是的直接子级。 我猜它从身体得到它的最大宽度，因为它的位置是绝对的，所以它不能显示为内联块以避免占用所有可用空间。
另外.ui-autocomplete { width: 1%; } 似乎工作。