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

我实现了一个jQuery UI自动完成框，而不是文本框的宽度，下拉选项正在扩展以填充页面的剩余宽度。

看一下这个例子，亲自看看：http : //jsbin.com/ojoxa4

我尝试在创建列表后立即设置列表的宽度，如下所示：

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

这似乎无能为力。

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

ui-autocomplete { width: 500px; }

确实，这确实起作用，但是这意味着页面上的所有自动完成功能都必须具有相同的宽度，这并不理想。

有没有一种方法可以分别设置每个菜单的宽度？或者更好的是，有人可以解释为什么宽度对我来说不正确吗？

我使用此嵌入式解决方案：

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

这基本上是@madcapnmckay的解决方案，但这不需要更改原始源。

事实证明，问题在于菜单正在扩展以填充其父元素（默认情况下为主体）的宽度。可以通过为其提供包含正确宽度的包含元素来纠正此问题。

首先，我添加了一个<div>类似的代码：

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

绝对定位使我可以<div>在输入之后立即放置而不中断文档流。

然后，当我调用自动完成功能时，我appendTo在选项中指定了一个参数，从而导致菜单被追加到我的<div>，从而继承了它的宽度：

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

这样可以解决问题。但是，我仍然想知道为什么这样做是必要的，而不是插件正常工作。

我对自动完成代码有所了解，罪魁祸首是这个小缺点

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

这是一个错误吗？

编辑：如果有人想看到一个简化的测试案例的错误在这里它是。

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

$(".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.ui.autocomplete.css样式表的引用。您是否在布局/母版页中包含了该样式表？

如果您想使用CSS，请尝试以下操作：

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

它将对每个自动完成输入起作用。

如果您使用的是官方jQuery ui自动完成功能（我在1.8.16上），并且想手动定义宽度，则可以这样做。

如果您使用的是缩小版本（如果没有，请通过匹配_resizeMenu手动查找），找到...

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

...并替换为（在Math.max之前添加this.options.width ||）...

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

...现在您可以在.autocomplete（{width：200}）函数中包含一个width值，jQuery会尊重它。如果不是，它将默认进行计算。

我知道这早已得到答复，但是我发现最简单的方法是使用自动完成功能的ID，并将宽度设置为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

链接表或硬编码并在此处设置参数。

尝试了所有其他方法后对我有用

好吧，恩德。我不知道我的解决方案是否能为您提供帮助，但是使用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>

我的解决方案是将自动完成功能附加到具有ID的div上，然后他们为特定的ul设置CSS：

jQuery / JavaScript：

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

CSS：

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

奇迹般有效。

我遇到了相同的问题，并通过使用这段代码解决了该问题，尽管这有点麻烦和尝试，但它确实可以设置宽度，因此我决定设置该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
    });

我的css文件中有此文件，因此自动完成功能采用width样式的span：

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