jQuery UI autocomplete ширина не установлена правильно

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

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

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

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

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

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

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

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

это ошибка?

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

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

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

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

он отлично работал для меня.

установите 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'); // HERE
            }
        })

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

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});

Ну, Эндер. Я не знаю, Может ли мое решение помочь вам или нет, но с 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>

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

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

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

...и замените его (добавьте это.опции.ширина| / перед математикой.макс. )..

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

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

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

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

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

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

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

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

он работал для меня после попытки все остальное

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

jQuery / JavaScript:

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

CSS:

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

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

Если вы хотите использовать CSS, попробуйте это:

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

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

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

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

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

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

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

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