jQuery UI自动完成宽度未正确设置

Question

我已经实现了一个jQuery UI Autocomplete框,而不是文本框的宽度,下拉选项正在扩展以填充页面的剩余宽度.

看看这个例子,亲自看看:http://jsbin.com/ojoxa4

我已经尝试在创建后立即设置列表的宽度,如下所示:

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

这似乎什么都不做.

我也尝试使用页面样式设置宽度:

ui-autocomplete { width: 500px; }

令人惊讶的是,这会起作用,但这意味着页面上的所有自动填充必须具有相同的宽度,这并不理想.

有没有办法单独设置每个菜单的宽度？或者更好,任何人都可以解释为什么宽度不适合我？

Answer 1

我使用这个插入式解决方案:

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

这基本上是@madcapnmckay的解决方案,但这不需要改变原始来源.

Answer 2

事实证明问题是菜单正在扩展以填充其父元素的宽度,默认情况下是父元素.这可以通过给它一个正确宽度的包含元素来纠正.

首先我添加了<div>这样的:

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

绝对定位允许我<div>在输入后立即放置,而不会中断文档流.

然后,当我调用自动完成时,我appendTo在选项中指定一个参数,导致菜单被附加到我的<div>,然后继承它的宽度:

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

这解决了这个问题.但是,我仍然有兴趣知道为什么这是必要的,而不是插件正常工作.

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

这是一个错误吗？

编辑:如果有人想看到这里的错误测试案例,那就是.

Answer 4

我知道这一点早已得到解答,但我认为有一个更好的解决方案

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

它对我来说很好.

Answer 5

我知道很久以前就已经回答了这个问题,但我遇到了同样的问题.我的解决方案是增加位置:绝对

Answer 6

在open事件中设置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
            }
        })

Answer 7

我也遇到了这个问题,但意识到我只是忘了包含对jquery.ui.autocomplete.css样式表的引用.您是否在布局/母版页中包含了该样式表？