Изменение ширины виджетов автозаполнения jquery-ui индивидуально

Question

Я работаю с несколькими виджетами автозаполнения jquery-ui на одной странице и хочу иметь возможность устанавливать ширину каждого из них отдельно.В настоящее время я делаю это так:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

Что на самом деле не является решением, поскольку пользователь может запускать различные автозаполнения в разных порядках, и этот код просто стилизует их в зависимости от того порядка, в котором онидобавляются в DOM.

Когда запускается автозаполнение, создается впечатление, что создается <ul>, а затем помещается его под полем ввода, которое его инициировало.К сожалению, я не могу найти какие-либо уникальные идентификаторы в этом сгенерированном <ul>, чтобы привязаться к нему и применить некоторые CSS.

Моя проблема отличается от этой , поскольку я использую только автозаполнение по умолчанию, а не автозаполнение-комбинированный список.

Кроме того, копание в автозаполнение <ul> и сопоставление различных значений ширины блока автозаполнения со значениями внутри списка также не работает, поскольку значения генерируются динамически.

Есть идеи?

Answer 1

Я решил эту проблему, используя доступное событие open. Мне нужен был способ динамической установки ширины вместе с другими элементами, и я не хотел дополнительной разметки.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});

Answer 2

Мне нравится ответ Люки. Но если вы находитесь в ситуации, когда вы не можете использовать функцию appendTo (может быть из-за скрытого переполнения и т. Д.), Вы можете использовать приведенный ниже код, чтобы убедиться, что вы вносите изменения в правильный список.

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

Ссылка: http://docs.jquery.com/UI/Autocomplete#method-widget

Answer 3

Если у вас есть несколько элементов управления, которые используют автозаполнение, достаточно элегантное решение - извлечь widget, присоединенный к элементу управления в последний момент, и изменить его CSS:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

Просмотр Демо .

Как упоминалось выше, ширина списка автозаполнения рассчитывается в самый последний момент, поэтому вы должны изменить его в событии open.

Answer 4

Вы можете получить виджет "ui-menu", прикрепленный к <input> с автозаполнением по отношению к $('#myinput').data("autocomplete").menu. Таким образом, чтобы изменить ширину, вы можете использовать

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

Answer 5

Без использования дополнительного кода Javascript вы можете использовать 1 простую строку CSS:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

Так почему же это работает с min-width ?

Просто потому, что JS перезаписывает width, иногда даже с решениями, использующими open: function(event, ui) { ... } (например, ответ rkever , который не работал в моем случае). Однако min-width не перезаписывается , поэтому он пригодится.

Кроме того, если вы не хотите использовать !important, вы можете дополнительно детализировать правило с остальными классами:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

Это позволило мне избежать дальнейших взломов JS, надеюсь, это поможет!

Answer 6

Вы можете обернуть поле ввода, которое вызывает автозаполнение в div, присвоить div конкретный идентификатор, а затем добавить ul к автозаполнению к этому div, а не к телу документа. Таким образом, вы можете настроить таргетинг на css на основе div.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script> 

Answer 7

Мне удалось решить эту проблему с помощью CSS, добавив float в меню автозаполнения.

.ui-autocomplete { float: left; }

Поскольку меню автозаполнения расположено absolute и является прямым потомком <body>.Я предполагаю, что он получает максимальную ширину от тела, и, поскольку он находится в абсолютном положении, он не может быть отображен как встроенный блок, чтобы не занимать все доступное пространство.

Также, похоже, .ui-autocomplete { width: 1%; } работает.*

Answer 8

Начиная с jQuery UI 1.10, виджет автозаполнения был переписан с использованием фабрики виджетов . Как часть этого, автозаполнение теперь содержит точку расширения _resizeMenu, которая вызывается при изменении размера меню перед отображением.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

Answer 9

Чтение API, я просто добавил класс ui-front к родительскому div моего ввода , и это прекрасно работает.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

См. здесь :

[...] родители поля ввода будут проверены на класс ui-front .Если найден элемент с классом ui-front, меню будет добавлено к этому элементу .Независимо от значения, если элемент не найден, меню будет добавлено к телу.

Добавленный элемент определяет положение и ширину меню.

Answer 10

Улучшение ответа Мартина Лёгдберга.Это сработало лучше для меня, потому что у меня было много текстовых полей на странице

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});