Я использую этот jQuery пользовательский интерфейс управления автозаполнением jQuery из коробки с сайта пользовательского интерфейса jQuery:
Моя проблема в том, что у меня есть несколько списков со списками на странице, и я хочу, чтобы они имели разную ширину для каждого.
Я могу изменить ширину для ВСЕХ из них, добавив этот CSS:
.ui-autocomplete-input
{
width: 300px;
}
но я не могу понять, как изменить ширину только на одном из них.
Простой
$('.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;}})
и т.д...
Я обновлю, если у вас есть представление о том, как вы хотите найти свои выпадающие списки.
РЕДАКТИРОВАТЬ КОММЕНТАРИЙ
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>
Я бы дал div div уникальный идентификатор:
$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')
Это выбирает дочерние элементы вашего div, которые являются входами с классом "ui-autocomplete-input".
Обратите внимание, что я использую код в 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);
<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>
Не беспокойтесь о 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".
Я думаю, что самый простой способ сделать это - захватить открытое событие, а затем установить там ширину:
$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
var width = 300;
$(".ui-autocomplete.ui-menu").width(300);
});
Так как только одно меню автозаполнения может быть активным за один раз, достаточно просто изменить ширину для класса меню.
Вы всегда можете установить фактическое правило CSS в своем документе в соответствии с классом,
.ui-autocomplete-input
{
width: 300px;
}
если вы заранее знаете, насколько это должно быть.
$.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 jQuery:
css("width", "300px");
http://api.jquery.com/css/#css2
Вы можете добавить это после добавления своих списков.
Как вы используете combobox в своем коде?
С небольшим изменением кода 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 будет ее соблюдать. Если нет, по умолчанию будет вычисляться.
Чтобы иметь полный контроль над списком автозаполнения и автоматически установите ширину и присвойте ему идентификатор типа "a_mycomboID"
измените эту строку
input = $( "<input>" )
Для
input = $( "<input id=a_"+select.attr('id')+" style='width:"+select.width()+"px;'>" )
Это автоматически установит ширину и даст идентификатор, например a_[the id of the combo box]. Это позволит вам контролировать поведение с помощью идентификатора.
$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 */
}