单独更改 jquery-ui 自动完成小部件的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4607164/
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
Changing width of jquery-ui autocomplete widgets individually
提问by CamelBlues
I'm working with mutiple jquery-ui autocomplete widgets on one page and want to be able to set the widths of each one individually. Currently, I'm doing it like this:
我正在一个页面上使用多个 jquery-ui 自动完成小部件，并希望能够单独设置每个小部件的宽度。目前，我是这样做的：
$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);
Which isn't really a solution since the user is able to trigger various autocompletes in different orders, and this code just styles them based on the order they are added to the DOM.
这不是一个真正的解决方案，因为用户能够以不同的顺序触发各种自动完成，并且这段代码只是根据它们添加到 DOM 的顺序来设置它们的样式。
When autocomplete is triggered, it seems to create a <ul>and then position it under the input box that triggered it. Unfortunately, I can't find any unique identifiers in this generated <ul>to latch on to and apply some CSS.
当触发自动完成时，它似乎创建了一个<ul>，然后将其放置在触发它的输入框下方。不幸的是，我在生成的这个中找不到任何唯一标识符<ul>来锁定和应用一些 CSS。
My issue is different from this one, since I'm using just the default autocomplete, and not the autocomplete-combobox.
我的问题与此不同，因为我只使用默认的自动完成功能，而不是自动完成组合框。
Also, digging into the autocomplete <ul>and matching different autocomplete box widths with the values inside the list doesn't work either, since the values are dynamically generated.
此外，深入研究自动完成<ul>并将不同的自动完成框宽度与列表中的值匹配也不起作用，因为这些值是动态生成的。
Any ideas?
有任何想法吗？
回答by rkever
I resolved this issue using the 'open' event available. I needed a way to dynamically set the width, along with other items and did not want extra markup.
我使用可用的“打开”事件解决了这个问题。我需要一种方法来动态设置宽度以及其他项目，并且不想要额外的标记。
$('#input').autocomplete({
source: mysource,
appendTo: '#div',
open: function() { $('#div .ui-menu').width(300) }
});
回答by Martin L?gdberg
I like luqui's answer. But if you are in a situation where you cannot use the appendTo feature (could be due to overflow hidden etc.), you can use the code below to make sure that you are making changes to the correct list.
我喜欢 luqui 的回答。但是如果您处于无法使用 appendTo 功能的情况（可能是由于溢出隐藏等），您可以使用下面的代码来确保您正在对正确的列表进行更改。
$('#input').autocomplete({
source: mysource,
open: function() {
$('#input').autocomplete("widget").width(300)
}
});
回答by Salman A
If you have multiple controls that use autocomplete, a reasonably elegant solution is to retrieve the widgetattached to the control at the last moment and modify its CSS:
如果您有多个使用自动完成的控件，一个相当优雅的解决方案是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
});
}
});
});
View Demo.
查看演示。
As mentioned above, the width of autocomplete list is calculated at the very last moment hence you must modify it in the openevent.
如上所述，自动完成列表的宽度是在最后一刻计算的，因此您必须在open事件中对其进行修改。
回答by Oleg
You can get "ui-menu" widget attached to the <input>having autocomplete with respect of $('#myinput').data("autocomplete").menu. So to change the width you can use
您可以将“ui-menu”小部件附加到<input>具有自动完成功能的$('#myinput').data("autocomplete").menu. 所以要改变你可以使用的宽度
$('#myinput').autocomplete({
source: yourUrlOrOtherSource,
open: function () {
$(this).data("autocomplete").menu.element.width(80);
}
});
回答by scrappedcola
You could wrap the input box that is triggering the auto-complete in a div, give the div a specific id, and then append the auto complete ul to that div rather than to the body of the document. That way you can target it with css based upon the div.
您可以将触发自动完成的输入框包装在 div 中，为 div 指定一个特定的 id，然后将自动完成 ul 附加到该 div 而不是文档正文。这样你就可以使用基于 div 的 css 来定位它。
<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
<input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
$( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script>
回答by Armfoot
Without using extra Javascript code, you can use 1 simple CSS line:
无需使用额外的 Javascript 代码，您可以使用 1 行简单的 CSS 代码：
<style type="text/css">
.ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>
So why does this work with min-width?
那么为什么这适用于min-width呢？
Simply because widthgets overwritten by the JS, sometimes even with solutions that use open: function(event, ui) { ... }(like rkever's answer, which did not work in my case). However, min-widthis not overwritten, so it comes in handy.
仅仅因为width被 JS 覆盖，有时甚至使用解决方案open: function(event, ui) { ... }（如rkever's answer，在我的情况下不起作用）。但是，min-width没有被覆盖，所以它派上用场。
Also, if you do not want to use!important, you can further detail the rule with the remaining classes:
此外，如果您不想使用!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}
This avoided me further JS hacks, hope it helps!
这避免了我进一步的 JS hack，希望它有所帮助！
回答by Trevald
I managed to solve this with CSS by adding float to the autocomplete menu.
我设法通过向自动完成菜单添加浮动来使用 CSS 解决此问题。
.ui-autocomplete { float: left; }
.ui-autocomplete { float: left; }
Since the autocomplete menu is positioned absoluteand a direct child of the <body>. I guess it gets it's max width from the body, and since it's position absolute it can't be displayed as inline-block to avoid taking all the available space.
由于自动完成菜单被定位absolute并且是<body>. 我想它从主体获得最大宽度，并且由于它是绝对位置，因此不能显示为内联块以避免占用所有可用空间。
Also .ui-autocomplete { width: 1%; }seems to work.
也 .ui-autocomplete { width: 1%; }似乎工作。
回答by ants
I like @Martin L?gdberg answer but if you're using fixed sized widths rather than doing some fancy maths on the returned results to set the width, then you could also just set the width in CSS
我喜欢@Martin L?gdberg 的答案，但是如果您使用固定大小的宽度而不是对返回的结果进行一些花哨的数学运算来设置宽度，那么您也可以只在 CSS 中设置宽度
ul .ui-autocomplete {
width: 50%;
}
回答by Ben Anderson
An improvement on Martin L?gdberg answer. This worked better for me because I had many textboxes on the page
Martin L?gdberg 答案的改进。这对我来说效果更好，因为我在页面上有很多文本框
$('.some-class').each(function(){
var txt = $(this);
txt.autocomplete({
source: mysource,
open: function() {
txt.autocomplete("widget").width(txt.outerWidth());
}
});
});
回答by Le Moineau
Reading API, I've just add a class ui-frontto the parent's divof my input, and that works fine.
阅读 API，我刚刚将一个类ui-front添加到我的input的父级div中，并且效果很好。
<div class="ui-front">
<label for="autosample" class="required">example</label>
<input name="autosample" class="default-autocomplete" type="text">
</div>
See here:
见这里：
[...] the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.
[...] 输入字段的父项将被检查ui-front类 。如果找到具有 ui-front 类的元素，则菜单将附加到该元素。无论值如何，如果没有找到元素，菜单将附加到正文。
The appended element determine the position and width of the menu.
附加元素确定菜单的位置和宽度。
