it-swarm.com.ru

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

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

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

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

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

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

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

Есть идеи?

25
CamelBlues

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

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

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

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

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

33
Martin Lögdberg

Если у вас есть несколько элементов управления, которые используют автозаполнение, достаточно элегантное решение - извлечь 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 .

13
Salman A

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

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

Без использования дополнительного кода 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?

Просто потому, что width перезаписывается JS, иногда даже с решениями, которые используют 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, надеюсь, это поможет!

1
Armfoot

Вы можете обернуть поле ввода, которое вызывает автозаполнение в 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> 
1
scrappedcola

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

.ui-autocomplete { float: left; }

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

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

0
Trevald

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

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

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

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

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

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

Смотрите здесь :

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

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

0
Le Moineau

Мне нравится ответ @Martin Lögdberg, но если вы используете фиксированную ширину, а не какие-то сложные математические вычисления для возвращаемых результатов, чтобы установить ширину, то вы также можете просто установить ширину в CSS

ul .ui-autocomplete {
  width: 50%;
}
0
ants