是否可以设置jQuery Autococterete Combobox的宽度?
-
30-09-2019 - |
题
我在用 这个jQuery UI Combobox自动完成控制 开箱即用jQuery UI网站:
我的问题是我在一个页面上有多个组合蛋白,我希望它们为每个组合都有不同的宽度。
我可以通过添加此CSS来更改它们的宽度:
.ui-autocomplete-input
{
width: 300px;
}
但是我不知道只有其中一个更改宽度的方法。
解决方案
一个简单的
$('.ui-autocomplete-input').css('width','300px')
作品(我在链接页面上尝试了 火焰)更改页面上的第一个。
您可以做类似的事情:
$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page
更改第一个。
要通过特征找到特定的特定,您可以在许多方面做到这一点。
通过第一个“选项”(在此示例“ 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输入”类的输入。
其他提示
不要打扰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;
}
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');
我使用以下内容,这是易于使用的小部件初始化功能之一,也许也是您要寻找的内容。我只添加了两条简单的行以实现它
$(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 This” ID进行比较。
请注意,我在 http://jqueryui.com/demos/autocomplete/#combobox.
在里面 _create
方法,添加此行:
_create: function() {
var self = this;
var eleCSS = this.element[0].className; //This line
然后稍微scrolldown,找到这个:
.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应用于组合1:
<script>
$(function() {
$('.autocomplete').combobox();
$('.combo-1').css('width', '50px');
});
</script>
我认为最简单的方法是捕获公开事件,然后在那里设置宽度:
$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
var width = 300;
$(".ui-autocomplete.ui-menu").width(300);
});
由于一次只能一个自动完成菜单,因此可以更改菜单类的宽度。
$.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;
}
您始终可以在文档中设置实际的CSS规则以匹配该类,
.ui-autocomplete-input
{
width: 300px;
}
如果您提前知道它必须有多大的范围。
要完全控制自动完整的Combobox并自动设置宽度,并给它一个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控制行为。
只需使用jQuery CSS方法:
css("width", "300px");
http://api.jquery.com/css/#css2
您可以在添加ComboBox后将其附加。
您如何在代码中使用ComboBox?
对 jQuery UI 代码您可以将宽度添加到.autococtey()函数。
如果您使用的是官方的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将尊重它。如果没有,将默认计算。
$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())
}
设置最大宽度而不是宽度,因为宽度随时都被插件覆盖。
.ui-autocomplete-input
{
max-width: 300px;/* you can set by percentage too */
}