jQuery UI自动完成宽度设置不正确
我已经实现了一个jQuery UI自动完成框，下拉选项不再是文本框的宽度，而是扩展以填充页面的剩余宽度。
看一下这个例子，亲眼看看：http://jsbin.com/ojoxa4
我尝试在创建列表后立即设置它的宽度，如下所示：
$('.ui-autocomplete:last').css('width',
$('#currentControlID').width()
);这似乎没有任何作用。
我也尝试过使用页面上的样式设置宽度：
ui-autocomplete { width: 500px; }这确实有效，但令人惊讶的是，这意味着页面上的所有自动补全必须是相同的宽度，这并不理想。
有没有办法单独设置每个菜单的宽度？或者更好的是，有人能解释一下为什么宽度对我来说不能正常工作吗？
回答 15
Stack Overflow用户
发布于 2011-04-13 23:31:55
事实证明，问题在于菜单正在扩展以填充其父元素的宽度，默认情况下父元素是正文。这可以通过给它一个具有正确宽度的包含元素来纠正。
首先，我添加了一个<div>，如下所示：
<div id="menu-container" style="position:absolute; width: 500px;"></div>绝对定位允许我在不中断文档流的情况下将<div>紧跟在输入之后。
然后，当我调用autocomplete时，我在选项中指定了一个appendTo参数，导致菜单被附加到我的<div>，从而继承了它的宽度：
$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});这就解决了这个问题。然而，我仍然有兴趣知道为什么这是必要的，而不是插件正常工作。
Stack Overflow用户
发布于 2011-05-09 10:08:00
我仔细研究了一下自动补全代码，罪魁祸首就是这个小东西。
_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.element.outerWidth()
) );
},我不确定ul.width("")应该做什么，但是ui.width("").outWidth()总是返回正文的宽度，因为这是ul所附加的内容。因此，宽度永远不会设置为元素的宽度...
不管怎么说。要修复此问题，只需将以下代码添加到您的代码中
$element.data("autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}这是一个bug吗？
编辑:如果有人想要查看错误here的简化测试用例，那就是它了。
Stack Overflow用户
发布于 2014-04-30 17:24:55
我知道这个问题早就得到了回答，但我认为还有更好的解决方案。
$(".autocomplete").autocomplete({
...
open: function() {
$("ul.ui-menu").width( $(this).innerWidth() );
...
}
...
});它对我来说工作得很好。
https://stackoverflow.com/questions/5643767
复制相似问题