Ширина автозаполнения jQuery UI не задана правильно

Я реализовал окно автозаполнения пользовательского интерфейса jQuery и вместо ширины текстового поля раскрывающиеся параметры расширяются, чтобы заполнить оставшуюся ширину страницы.

Посмотрите на этот пример, чтобы увидеть его сами: http://jsbin.com/ojoxa4

Я попытался установить ширину списка сразу после его создания, например:

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

Это ничего не делает.

Я также попытался установить ширину, используя стили на странице:

ui-autocomplete { width: 500px; }

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

Есть ли способ установить ширину каждого меню отдельно? Или лучше, может ли кто-нибудь объяснить, почему ширина не работает правильно для меня?

ОТВЕТЫ

Ответ 1

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

Сначала я добавил <div> так:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

Абсолютное позиционирование позволяет мне помещать <div> сразу после ввода без прерывания потока документа.

Затем, когда я вызываю автозаполнение, я указываю аргумент appendTo в параметрах, заставляя меню добавляться к моему <div> и, таким образом, наследует его ширину:

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

Это устраняет проблему. Тем не менее, мне все равно будет интересно узнать, почему это необходимо, а не правильно работает плагин.

Ответ 2

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

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

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

Ответ 3

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

_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:  В случае, если кто-то хочет увидеть уменьшенный тестовый пример для ошибки здесь, он есть.

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Установите 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
            }
        })

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

Если вы используете официальный 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 будет ее соблюдать. Если нет, по умолчанию будет вычисляться.

Ответ 11

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

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

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

Ответ 12

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

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

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

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

Ответ 13

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

JQuery/JavaScript:

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

CSS

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

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

Ответ 14

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

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

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

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

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