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

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

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

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

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

这似乎什么都不做。

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

 ui-autocomplete { width: 500px; } 

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

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

17 Solutions collect form web for “jQuery UI自动完成宽度设置不正确”

我使用这个入门解决scheme

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

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

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

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

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

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

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

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

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

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

这是一个错误?

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

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

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

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

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

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

它为我工作得很好。

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

恩,恩德 我不知道我的解决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> 

如果你使用的官方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将会遵守它。 如果不是,它将默认计算它。

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

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

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

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

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

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

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

我的解决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; } 

奇迹般有效。

我有这个在我的CSS文件,所以自动完成采用风格的spanwidth

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

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

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

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

我面临同样的问题,并通过使用这段代码解决了这个问题,虽然它是一个小小的打击和试用类的东西,但它的工作原理,我无法设置宽度,所以我决定设置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 }); 
  • 样式化JQuery UI自动完成
  • 如何在Rails中设置jquery-ui自动完成
  • jQuery UI自动完成与JSON
  • 在jQuery UI自动完成中限制结果
  • jQuery UI自动完成项目和ID
  • selectjQuery UI自动完成后清除表单字段