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

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

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

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

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

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

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

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

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

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

Без использования дополнительного кода 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, надеюсь, это поможет!

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

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

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

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

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

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

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

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

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

.ui-autocomplete { float: left; }

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

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