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

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

看看这个例子，看看它自己： http : //jsbin.com/ojoxa4

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

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

这似乎什么都不做。

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

 ui-autocomplete { width: 500px; } 

这样做的确令人吃惊，但是这意味着页面上的所有autocompletes必须是相同的宽度，这并不理想。

有没有办法单独设置每个菜单的宽度？ 或者更好，任何人都可以解释为什么宽度不正确的工作？

Answer 1

我使用这个入门解决scheme ：

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

这基本上是@madcapnmckay的解决scheme，但是不需要改变原始的源代码。

Answer 2

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

首先，我添加了一个像这样的<div> ：

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

绝对定位允许我在input之后立即放置<div>而不中断文档stream。

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

 $('#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（）总是返回body的宽度，因为这是ul的后缀。 因此，宽度从来没有设置为元素宽度….

无论如何。 修复只需将其添加到您的代码

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

这是一个错误？

编辑：如果有人想在这里看到一个减lesstesting案例的bug。

Answer 4

我知道很久以前就已经回答了，但是我遇到了同样的问题。 我的解决scheme是增加位置：绝对

Answer 5

在公开赛中设置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');** } }) 

Answer 6

我遇到了这个问题，但意识到我只是忘记了包括对jquery.ui.autocomplete.css样式表的引用。 您是否在布局/主页面中包含了该样式表？

Answer 7

我知道这个问题早已得到解答，但我认为有一个更好的解决办法

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

它为我工作得很好。

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

Answer 9

恩，恩德 我不知道我的解决scheme是否可以帮助你，但与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> 

Answer 10

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

如果您使用缩小版本（如果没有，然后通过匹配_resizeMenu手动查找），find…

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

…并将其replace为（在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}）函数中包含一个宽度值，jQuery将会遵守它。 如果不是，它将默认计算它。

Answer 11

我知道这已经被回答了很久，但我发现最简单的方法是使用自动完成的id，并设置宽度为100px，你会打电话

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

在完成$('#MyId').autocomplete(...); 呼叫。 这样，您就不会将DOM中自动填充文本框的顺序绑定到您的脚本。

Answer 12

如果你不能dynamic设置宽度，并没有任何工作试图包括这一点

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

无论是在链接表或硬编码，并在这里设置参数。

它尝试了一切后，为我工作

Answer 13

我的解决scheme是将自动完成追加到一个具有ID的div，然后他们为该特定的ul设置CSS：

jQuery的/ JavaScript的：

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

CSS：

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

奇迹般有效。

Answer 14

我有这个在我的CSS文件，所以自动完成采用风格的span的width ：

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

Answer 15

如果你喜欢使用CSS试试这个：

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

它将在每个自动完成input中工作。

Answer 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 

看看什么最适合你。希望这有助于。

Answer 17

自动完成有一个宽度选项。 我用它为1.3.2。

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