it-swarm.com.ru

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

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

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

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

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

Похоже, это ничего не делает.

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

ui-autocomplete { width: 500px; }

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

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

66
Ender

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

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

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

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

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

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

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

57
Ender

Я использую это раскрывающееся решение:

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

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

99
Arnaud Leymet

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

_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());
}

Это ошибка?

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

37
madcapnmckay

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

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

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

22
obomaye

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

22
Andrius Chamentauskas

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

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

15
Nick Olsen

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

3
pradip_PRP

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

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

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

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

0
Flea

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

jQuery/JavaScript:

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

CSS:

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

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

0
Eric Belair

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

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

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

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

0
user489419

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

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

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

0
arviman

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

0
Harry B