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

Question

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

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

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

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

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

Кроме того, копаться в автозаполнение <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) 
    }  
});

Ref: 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-меню», подключенный к <input> Наличие автозаполнения с уважением $('#myinput').data("autocomplete").menu. Отказ Итак, чтобы изменить ширину, которую вы можете использовать

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

Answer 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> 

Answer 6

Не используя дополнительный код JavaScript, вы можете использовать 1 простую CSS Line:

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

Так почему эта работа с минимальная ширина?

Просто потому что 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, надеюсь, это поможет!

Answer 7

Я люблю @martin lögdberg ответить, но если вы используете ширина фиксированной размеры, а не делать некоторые модульные математики на возвращенные результаты, чтобы установить ширину, то вы также можете просто установить ширину в CSS

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

Answer 8

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

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

Answer 9

Чтение API, я просто добавил класс ui-front. к родителю девочка мой Вход, И это работает нормально.

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

Видеть здесь :

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

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

Answer 10

Как jquery ui 1.10, виджет автозаполнения был переписан с помощью Виджет Фабрика. Отказ Как часть этого, автозаполнение теперь содержит _resizeMenu Точка расширения, которая называется при размещении меню перед отображением.

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

Answer 11

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

.ui-autocomplete { float: left; }

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

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