Действительно ли возможно установить ширину поля комбинированного списка автоматического заполнения jQuery?
Я использую это управление автоматическим заполнением поля комбинированного списка UI jQuery из поля от веб-сайта UI jQuery:
Моя проблема - то, что у меня есть несколько полей комбинированного списка на странице, и я хочу, чтобы у них были различные ширины для каждого.
Я могу изменить ширину для Всех них путем добавления этого CSS:
.ui-autocomplete-input
{
width: 300px;
}
но я не могу выяснить способ изменить ширину на всего одном из них.
5 ответов
Простой
$('.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 уникальный идентификатор, тогда:
$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')
Это выбирает дочерние элементы вашего div, которые являются входами с классом "ui- автозаполнение-ввод ".
Просто используйте метод jQuery CSS:
css("width", "300px");
http://api.jquery.com/css/#css2
Вы можете добавить это после добавление поля со списком.
Как использовать поле со списком в коде?
Обратите внимание, что я использую код из 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>
Не беспокойтесь о 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;
}
Вы всегда можете установить фактическое правило CSS в своем документе, чтобы оно соответствовало классу,
.ui-autocomplete-input
{
width: 300px;
}
если вы заранее знаете, насколько широким оно должно быть.