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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 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 event.

Ответ 4

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

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

Ответ 5

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

Ответ 6

Без использования дополнительного кода 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 answer, который не работал в моем случае), Однако 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, надеюсь, что это поможет!

Ответ 7

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

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

Ответ 8

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

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

Ответ 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 фронта. Если элемент с классом ui-front найден, меню будет добавлен к этому элементу. Независимо от значения, если нет элемент будет найден, меню будет добавлено к телу.

Приложенный элемент определяет положение и ширину меню.

Ответ 10

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

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

Ответ 11

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

.ui-autocomplete { float: left; }

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

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