是否可以设置 jQuery 自动完成组合框的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2688652/
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
Is it possible to set the width of a jQuery autocomplete combobox?
提问by leora
I am using this jQuery UI combobox autocomplete controlout of the box off the jQuery UI website:
我在 jQuery UI 网站上开箱即用地使用了这个 jQuery UI 组合框自动完成控件：
My issue is that I have multiple comboboxes on a page, and I want them to have different widths for each one.
我的问题是我在一个页面上有多个组合框，我希望它们每个都有不同的宽度。
I can change the width for ALL of them by adding this CSS:
我可以通过添加此 CSS 来更改所有这些的宽度：
.ui-autocomplete-input
{
width: 300px;
}
but I can't figure out a way to change the width on just one of them.
但我想不出一种方法来改变其中一个的宽度。
回答by Mark
A simple
一个简单的
$('.ui-autocomplete-input').css('width','300px')
works (I tried it on the linked page with Firebug) to change the first one on the page.
工作（我在带有Firebug的链接页面上尝试过）更改页面上的第一个。
You can do something like:
您可以执行以下操作：
$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page
To change the Nth one.
改变第N个。
To find a specific one by a characteristic, you could do it in many ways.
要通过特征找到特定的特征，您可以通过多种方式进行。
Find it by the first "option" (in this example "asp"):
通过第一个“选项”（在本例中为“asp”）找到它：
$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })
Find it by its "label":
通过它的“标签”找到它：
$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})
etc...
等等...
I'll update if you have an idea of how you want to find your combobox.
如果您知道如何找到组合框，我会更新。
EDIT FOR COMMENT
编辑评论
oo, that makes it even easier. From the example source you linked to, the HTML is already wrapped in a div:
oo，这使它更容易。从您链接到的示例源代码中，HTML 已经包含在一个 div 中：
<div class="ui-widget" id="uniqueID">
<label>Your preferred programming language: </label>
<select>
<option value="a">asp</option>
<option value="c">c</option>
<option value="cpp">c++</option>
<option value="cf">coldfusion</option>
<option value="g">groovy</option>
<option value="h">haskell</option>
<option value="j">java</option>
<option value="js">javascript</option>
<option value="p1">perl</option>
<option value="p2">php</option>
<option value="p3">python</option>
<option value="r">ruby</option>
<option value="s">scala</option>
</select>
</div>
I would give that div a unique id then:
然后我会给那个 div 一个唯一的 id：
$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')
That selects child elements of your div that are inputs with a class of "ui-autocomplete-input".
这会选择 div 的子元素，这些子元素是具有“ui-autocomplete-input”类的输入。
回答by Puaka
Note that I use the code in http://jqueryui.com/demos/autocomplete/#combobox.
请注意，我使用了http://jqueryui.com/demos/autocomplete/#combobox 中的代码。
In the _createmethod, add this line:
在_create方法中，添加这一行：
_create: function() {
var self = this;
var eleCSS = this.element[0].className; //This line
Then scrolldown a little, find this:
然后向下滚动一点，找到这个：
.addClass("ui-widget ui-widget-content ui-corner-left");
And change this to:
并将其更改为：
.addClass("ui-widget ui-widget-content ui-corner-left "+ eleCSS);
HTML
HTML
<select class="combo-1 autocomplete">
<option value="a">asp</option>
<option value="c">c</option>
<option value="cpp">c++</option>
<option value="cf">coldfusion</option>
<option value="g">groovy</option>
<option value="h">haskell</option>
<option value="j">java</option>
</select>
Now you can apply CSS to combo-1:
现在您可以将 CSS 应用于组合 1：
<script>
$(function() {
$('.autocomplete').combobox();
$('.combo-1').css('width', '50px');
});
</script>
回答by Banzor
Don't bother with JavaScript. You can easily do this in CSS as you were originally trying to do. All you need to do is add a unique selector to each one. For example:
不要打扰 JavaScript。您可以像最初尝试那样在 CSS 中轻松完成此操作。您需要做的就是为每个选择器添加一个唯一的选择器。例如：
HTML would look like this
HTML 看起来像这样
<div class="title">
<label for="title">Title: </label>
<input id="title">
</div>
<div class="tags">
<label for="tags">Tags: </label>
<input id="tags">
</div>
CSS would look like this
CSS 看起来像这样
.ui-autocomplete-input
{
width: 120px;
}
.title .ui-autocomplete-input
{
width: 200px;
}
.tags .ui-autocomplete-input
{
width: 600px;
}
回答by Joyce Babu
JavaScript
JavaScript
var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.addClass('myautocomplete');
CSS
CSS
.myautocomplete{width:300px!important;}
You can't set the widthdirectly, because it will get overwritten. But you can set the min-widthdirectly.
您不能width直接设置，因为它会被覆盖。但是可以min-width直接设置。
var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.css('min-width', '300px');
回答by Wombat_RW
I use the following which is basicly one of the readily available widget init functions and might be what you are looking for too. I added just two simple lines to achieve it
我使用以下基本上是现成的小部件初始化功能之一，可能也是您正在寻找的。我只添加了两行简单的行来实现它
$(function(){
$.widget( "ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : "";
var getwid = this.element.width(); // <<<<<<<<<<<< HERE
var input = this.input = blah blah
.insertAfter( select )
.val( value )
.autocomplete({
delay: 0,
minLength: 0,
source: function( request, response ) {
blah blah
},
blah blah
})
//?? .addClass( "ui-widget ui-widget-content ui-corner-left" );
input.width(getwid); // <<<<<<<<<<<< AND HERE
input.data( "autocomplete" )._renderItem = function( ul, item ) {
blah blah
Note the lines var getwidetc and input.width(getwid);
注意行var getwid等和input.width(getwid);
This I worked out to copy the width of the select objects and apply it to the combo boxes as they (the autocomplete comboboxes) are created to overlay the select inputs.
我设法复制选择对象的宽度并将其应用于组合框，因为它们（自动完成组合框）被创建以覆盖选择输入。
Hope that helps. Regards.
希望有帮助。问候。
PS: I believe that if you really just want to apply fixed widths not referencing the underlying select list then ignore the first line I added and change the second to compare a predefined array with the "this" id.
PS：我相信，如果您真的只想应用不引用底层选择列表的固定宽度，请忽略我添加的第一行并更改第二行以将预定义的数组与“this”ID 进行比较。
回答by Charles Chan
I think the easiest way to do it is to capture the open event and then set the width there:
我认为最简单的方法是捕获打开事件，然后在那里设置宽度：
$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
var width = 300;
$(".ui-autocomplete.ui-menu").width(300);
});
Since only one autocomplete menu can be active at one time, it's okay to just change the width for the menu class.
由于一次只能激活一个自动完成菜单，因此只需更改菜单类的宽度即可。
回答by Geoff
You could always set an actual CSS rule in your document to match the class,
你总是可以在你的文档中设置一个实际的 CSS 规则来匹配类，
.ui-autocomplete-input
{
width: 300px;
}
if you know in advance how wide it has to be.
如果您事先知道它必须有多宽。
回答by cinatic
$.widget( "custom.myAutoComplete", $.ui.autocomplete, {
options: {
resultClass: "leanSolutions",
},
_create: function()
{
this._super();
},`
_renderMenu: function(ul, items)
{
var that = this;
ul.addClass(that.options.resultClass);
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
}
});
Now You Can do this:
现在你可以这样做：
$('.myAutoCompleteBox').myAutoComplete(
data: ...
etc: ...
resultClass: 'myAutoCompleteBoxResultList'
);
And then you can style it
然后你可以设计它
.myAutoCompleteBoxResultList{
width: 8000px;
}
回答by Premchandra Singh
$input.data('ui-autocomplete')._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
If you doing inside your own widget, you can do something like
如果您在自己的小部件中进行操作，则可以执行以下操作
// Fix width of the menu
this.input = <your dom element where you bind autocomplete>;
this.input.data("ui-autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth())
}
回答by Arfan Mirza
Set the max width instead of width, because width is override by plugin any time..
设置最大宽度而不是宽度，因为宽度随时会被插件覆盖..
.ui-autocomplete-input
{
max-width: 300px;/* you can set by percentage too */
}
