Ширина автозаполнения пользовательского интерфейса jQuery не установлена правильно

Я использую это drop-in solution:

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}

В основном это @madcapnmckay решение, но не нужно менять исходный источник.

В коде автозаполнения я прокопал, и виновник - это немного ярче

_resizeMenu: function() {
    var ul = this.menu.element;
    ul.outerWidth( Math.max(
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
},

Я не уверен, что предполагается ul.width( "), но ui.width(" "). outWidth() всегда возвращает ширину тела, потому что это то, к чему добавляется ul. Следовательно, ширина никогда не устанавливается на ширину элементов....

В любом случае. Чтобы исправить просто добавьте это в свой код

$element.data("autocomplete")._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
}

Это ошибка?

EDIT:  В случае, если кто-то хочет увидеть уменьшенный тестовый пример для ошибки здесь, он есть.

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

Установите css в открытое событие!

$('#id').autocomplete({
    minLength: 3,
    source: function(request, response) {
        $.ajax({
                    url: "myurl",
                    dataType: "json",
                    type: 'POST',
                    data: {
                        'q': request.term,

                        'maxRows': 15
                    },
                    success: function(data) {

                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                            }
                        })),
                    }
                })
            },
            select: function(event, ui) {
                $("#id").val(ui.item.label);
            },
            focus: function ( event, ui ){
                $form.find('#id').val(ui.item.label);
                return false;
            },
            open: function(){
                **$('.ui-autocomplete').css('width', '300px');**
            }
        })

Я столкнулся с этой проблемой, но понял, что просто забыл включить ссылку на таблицу стилей jquery.ui.autocomplete.css. Вы включили эту таблицу стилей в свою макет/главную страницу?

Я знаю, что на это уже давно ответили, но я думаю, что есть лучшее решение

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

Это сработало для меня.

Ну, Эндер. Я не знаю, может ли мое решение помочь вам или нет, но с Jqueryui remote-with-cache.html он работал. Я просто добавил свойство size в текстовое поле.

См. код ниже:

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>

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

  $('.ui-autocomplete').css('margin-left','25%') //center align
  $('.ui-autocomplete').css('max-width','38%') //hit and trial
  $('.ui-autocomplete').css('min-width','38%') //hit and trial

Посмотрите, что лучше всего подходит для вас. Надеюсь, это поможет.

Если вы хотите использовать css, попробуйте следующее:

.ui-widget-content.ui-autocomplete{ width: 350px; }

Он будет работать на каждом входе автозаполнения.

У меня это в моем файле css, поэтому автозаполнение принимает width стиля span:

 span input.ui-autocomplete-input {
     width: 100%;
 }

Мое решение состояло в том, чтобы добавить автозаполнение в div с id, и они устанавливают CSS для этой конкретной ul:

JQuery/JavaScript:

$("input[name='search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

Работает как шарм.

Если вы не можете установить ширину динамически, и ничего не работает, попробуйте включить этот

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

либо в связанном листе, либо в жестком коде и задайте здесь параметры.

Он работал у меня, пробовав все остальное

Я знаю, что это уже давно ответили, но самый простой способ, который я нахожу, - использовать идентификатор автозаполнения и установить ширину в 100 пикселей, вы бы назвали

$('.ui-autocomplete-input#MyId').css('width', '100px');

после завершения вызова $('#MyId').autocomplete(...);. Таким образом, вы не связываете порядок своих текстовых полей автозаполнения в своей DOM с вашим script.

Если вы используете официальный jQuery ui autocomplete (я на 1.8.16) и хотели бы определить ширину вручную, вы можете сделать это.

Если вы используете мини-версию (если нет, то найдите вручную, сопоставляя _resizeMenu), найдите...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... и замените его (добавьте this.options.width || до Math.max)...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... теперь вы можете включить значение ширины в функцию .autocomplete({width: 200}), и jQuery будет ее соблюдать. Если нет, по умолчанию будет вычисляться.

Существует опция ширины для автозаполнения. Я использую его для 1.3.2.

$('#mytextbox').autocomplete(url, {  
        width: 280,
        selectFirst: false,
        matchSubset: false,
        minChars: 1,
        extraParams:{myextraparam:myextraparam},
        max: 100
    });