jQuery UI 自动完成宽度设置不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5643767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Autocomplete Width Not Set Correctly
提问by Ender
I have implemented a jQuery UI Autocomplete box, and rather than being the width of the textbox, the dropdown options are expanding to fill the remaining width of the page.
我已经实现了一个 jQuery UI 自动完成框，而不是文本框的宽度，下拉选项正在扩展以填充页面的剩余宽度。
Have a look at this example to see it for yourself: http://jsbin.com/ojoxa4
看看这个例子自己看看：http: //jsbin.com/ojoxa4
I have tried setting the width of the list immediately after creating it, like so:
我尝试在创建列表后立即设置列表的宽度，如下所示：
$('.ui-autocomplete:last').css('width',
$('#currentControlID').width()
);
This appears to do nothing.
这似乎没有任何作用。
I have also tried setting the width using on-page styles:
我还尝试使用页面样式设置宽度：
ui-autocomplete { width: 500px; }
This DOES work, amazingly, however it would mean that all autocompletes on a page would have to be the same width, which is not ideal.
这确实有效，令人惊讶的是，但这意味着页面上的所有自动完成都必须具有相同的宽度，这并不理想。
Is there a way to set the width of each menu individually? Or better, can anyone explain why the widths are not working correctly for me?
有没有办法单独设置每个菜单的宽度？或者更好，谁能解释为什么宽度不适合我？
采纳答案by Ender
It turns out the problem is that the menu is expanding to fill the width of its parent element, which by default is the body. This can be corrected by giving it a containing element of the correct width.
事实证明，问题在于菜单正在扩展以填充其父元素的宽度，默认情况下是主体。这可以通过给它一个正确宽度的包含元素来纠正。
First I added a <div>like so:
首先我添加了一个<div>这样的：
<div id="menu-container" style="position:absolute; width: 500px;"></div>
The absolute positioning allows me to place the <div>immediately after the input without interrupting the document flow.
绝对定位允许我<div>在输入之后立即放置而不中断文档流。
Then, when I invoke the autocomplete, I specify an appendToargument in the options, causing the menu to be appended to my <div>, and thus inherit its width:
然后，当我调用自动完成功能时，我appendTo在选项中指定了一个参数，从而将菜单附加到 my <div>，从而继承其宽度：
$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});
This fixes the problem. However, I'd still be interested to know why this is necessary, rather than the plug-in working correctly.
这解决了这个问题。但是，我仍然有兴趣知道为什么这是必要的，而不是插件正常工作。
回答by Arnaud Leymet
I use this drop-in solution:
我使用这个嵌入式解决方案：
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
That's basically @madcapnmckay's solution, but that doesn't need to change the original source.
这基本上是@madcapnmckay的解决方案，但这不需要更改原始来源。
回答by madcapnmckay
I had a dig around in the autocomplete code and the culprit is this little blighter
我在自动完成代码中进行了深入研究，罪魁祸首是这个小坏蛋
_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.element.outerWidth()
) );
},
I'm not sure what ul.width("") is suppose to be doing but ui.width("").outWidth() always returns the width of the body because that's what the ul is appended to. Hence the width is never set to the elements width....
我不确定 ul.width("") 应该做什么，但 ui.width("").outWidth() 总是返回主体的宽度，因为这是 ul 附加到的。因此宽度永远不会设置为元素宽度....
Anyway. To fix simply add this to your code
反正。要修复只需将此添加到您的代码中
$element.data("autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
Is this a bug?
这是一个错误吗？
EDIT: In case anyone wants to see a reduced test case for the bug hereit is.
编辑：如果有人想看到一个简化的测试案例的错误在这里它是。
回答by obomaye
I know this has long since been answered, but i think there is a better solution
我知道这个问题早就有人回答了，但我认为有更好的解决方案
$(".autocomplete").autocomplete({
...
open: function() {
$("ul.ui-menu").width( $(this).innerWidth() );
...
}
...
});
It worked fine for me.
它对我来说很好。
回答by Andrius Chamentauskas
I know this has been answered long ago, but I ran into same problem. My solution was to add position:absolute
我知道很久以前就已经回答了这个问题，但我遇到了同样的问题。我的解决方案是添加位置：绝对
回答by hmoyat
Set the css in the open event!
在open事件中设置css！
$('#id').autocomplete({
minLength: 3,
source: function(request, response) {
$.ajax({
url: "myurl",
dataType: "json",
type: 'POST',
data: {
'q': request.term,
'maxRows': 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.name,
}
})),
}
})
},
select: function(event, ui) {
$("#id").val(ui.item.label);
},
focus: function ( event, ui ){
$form.find('#id').val(ui.item.label);
return false;
},
open: function(){
$('.ui-autocomplete').css('width', '300px'); // HERE
}
})
回答by Nick Olsen
I ran into this issue as well but realized that I just forgot to include a reference to the jquery.ui.autocomplete.css style sheet. Did you include that style sheet in your layout/master page?
我也遇到了这个问题，但意识到我只是忘记包含对 jquery.ui.autocomplete.css 样式表的引用。您是否在布局/母版页中包含该样式表？
回答by pradip_PRP
$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
$("#autocompleteID").autocomplete ("widget").css("width","300px");
}
});回答by Flea
If you like to use css try this:
如果你喜欢使用 css 试试这个：
.ui-widget-content.ui-autocomplete {
width: 350px;
}
It will work on every autocomplete input.
它将适用于每个自动完成输入。
回答by Eric Belair
My solution was to append the autocomplete to a div with an id, and they set CSS for that specific ul:
我的解决方案是将自动完成功能附加到带有 id 的 div，然后他们为该特定 ul 设置 CSS：
jQuery/JavaScript:
jQuery/JavaScript：
$("input[name='search-text]").autocomplete({
appendTo: "#item-search-autocomplete",
source: ....
});
CSS:
CSS：
#item-search-autocomplete .ui-autocomplete {
width: 315px;
}
Works like a charm.
奇迹般有效。
