我正在使用jQuery UI 网站开箱即用的jQuery UI 组合框自动完成控件：
我的问题是我在一个页面上有多个组合框，我希望它们每个都有不同的宽度。
我可以通过添加这个 CSS 来改变它们的宽度：
.ui-autocomplete-input
{
width: 300px;
}
但我想不出一种方法来改变其中一个的宽度。
问问题
66284 次
14 回答
35
一个简单的
$('.ui-autocomplete-input').css('width','300px')
工作（我在与Firebug的链接页面上尝试过）来更改页面上的第一个。
您可以执行以下操作：
$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page
改变第N个。
要通过特征找到特定的特征，您可以通过多种方式进行。
通过第一个“选项”（在本例中为“asp”）找到它：
$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })
通过它的“标签”找到它：
$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})
ETC...
如果您知道如何找到组合框，我会更新。
编辑评论
哦，这使它更容易。从您链接到的示例源中，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>
然后我会给那个 div 一个唯一的 id：
$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')
这会选择您的 div 的子元素，这些子元素是具有“ui-autocomplete-input”类的输入。
于 2010-04-24T19:09:45.150 回答
5
请注意，我使用http://jqueryui.com/demos/autocomplete/#combobox中的代码。
在_create方法中，添加以下行：
_create: function() {
var self = this;
var eleCSS = this.element[0].className; //This line
然后向下滚动一点，找到这个：
.addClass("ui-widget ui-widget-content ui-corner-left");
并将其更改为：
.addClass("ui-widget ui-widget-content ui-corner-left "+ eleCSS);
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>
现在您可以将 CSS 应用于 combo-1：
<script>
$(function() {
$('.autocomplete').combobox();
$('.combo-1').css('width', '50px');
});
</script>
于 2010-04-24T21:24:37.467 回答
5
不要为 JavaScript 烦恼。您可以像最初尝试做的那样在 CSS 中轻松地做到这一点。您需要做的就是为每个选择器添加一个唯一的选择器。例如：
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看起来像这样
.ui-autocomplete-input
{
width: 120px;
}
.title .ui-autocomplete-input
{
width: 200px;
}
.tags .ui-autocomplete-input
{
width: 600px;
}
于 2010-04-27T13:16:26.173 回答
5
JavaScript
var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.addClass('myautocomplete');
CSS
.myautocomplete{width:300px!important;}
你不能width直接设置，因为它会被覆盖。但是你可以min-width直接设置。
var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.css('min-width', '300px');
于 2012-01-20T10:12:43.703 回答
5
我使用以下基本上是现成的小部件初始化功能之一，可能也是您正在寻找的。我只添加了两条简单的线来实现它
$(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
注意行var getwid等和input.width(getwid);
我计算出复制选择对象的宽度并将其应用于组合框，因为它们（自动完成组合框）被创建以覆盖选择输入。
希望有帮助。问候。
PS：我相信，如果您真的只想应用固定宽度而不引用底层选择列表，那么忽略我添加的第一行并更改第二行以将预定义数组与“this”id 进行比较。
于 2012-02-22T10:17:28.823 回答
3
我认为最简单的方法是捕获打开事件，然后在那里设置宽度：
$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
var width = 300;
$(".ui-autocomplete.ui-menu").width(300);
});
由于一次只能激活一个自动完成菜单，因此只需更改菜单类的宽度即可。
于 2010-11-10T18:01:39.303 回答
1
你总是可以在你的文档中设置一个实际的 CSS 规则来匹配这个类，
.ui-autocomplete-input
{
width: 300px;
}
如果您事先知道它必须有多宽。
于 2010-04-24T19:13:19.863 回答
1
$.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 );
});
}
});
现在你可以这样做：
$('.myAutoCompleteBox').myAutoComplete(
data: ...
etc: ...
resultClass: 'myAutoCompleteBoxResultList'
);
然后你可以设计它
.myAutoCompleteBoxResultList{
width: 8000px;
}
于 2015-01-22T20:09:53.210 回答
1
它适用于我使用：
$.extend($.ui.autocomplete.prototype.options, {
open: function(event, ui) {
$(this).autocomplete("widget").css({
"width": ($(this).outerWidth() + "px")
});
}
});
谢谢迈克尔西蒙斯https://info.michael-simons.eu/2013/05/02/how-to-fix-jquery-uis-autocomplete-width/
于 2020-06-23T13:57:09.457 回答
0
只需使用 jQuery CSS 方法：
css("width", "300px");
http://api.jquery.com/css/#css2
您可以在添加组合框后附加它。
您如何在代码中使用组合框？
于 2010-04-22T12:35:02.240 回答
0
只需对jQuery UI代码稍作改动，就可以为 .autocomplete() 函数添加宽度。
如果您使用的是官方的 jQuery UI 自动完成功能（我在 1.8.16）并且想手动定义宽度。
如果您使用的是缩小版（如果没有，则通过匹配 _resizeMenu 手动查找），查找...
_resizeMenu:function(){var a = this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(), this.element.outerWidth()))}
...并将其替换为（this.options.width ||在 Math.max 之前添加）...
_resizeMenu:function(){var a = this.menu.element;a.outerWidth(this.options.width || Math.max(a.width("").outerWidth(), this.element.outerWidth()))}
你现在可以在 .autocomplete({width:200}) 函数中包含一个宽度值，jQuery 会支持它。如果没有，它将默认计算它。
于 2011-09-15T13:49:12.543 回答
0
完全控制自动完成组合框并自动设置宽度并为其提供一个 ID，如“a_mycomboID”
更改此行
input = $( "<input>" )
到
input = $( "<input id=a_"+select.attr('id')+" style='width:"+select.width()+"px;'>" )
这将自动设置宽度，并给它一个 ID，例如a_[the id of the combo box]. 这将允许您使用 ID 控制行为。
于 2012-09-26T09:45:44.480 回答
0
$input.data('ui-autocomplete')._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
如果您在自己的小部件中进行操作，则可以执行类似的操作
// 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())
}
于 2016-04-26T10:45:17.627 回答
0
设置最大宽度而不是宽度，因为宽度随时被插件覆盖。
.ui-autocomplete-input
{
max-width: 300px;/* you can set by percentage too */
}
于 2017-10-20T10:16:21.627 回答