jQuery UI的 - Autcomplete - 基于内容

Question

动态设置是否有一种方法来设置动态自动完成对象的宽度，基于文本的长度返回给它？

感谢

Answer 1

这一次花了一点努力，但我相信我有一个合理的解决方案。这主要需要为了改变菜单的默认行为结合到自动完成构件的“开放式”的事件，因为它显示，以及修改几个CSS属性来帮助我们。

的方法带有一个警告：这将导致后台酒吧仅跨越文本的长度而不是在IE7中菜单的所有道路。它将在IE8 +以及所有其他主流浏览器中正常运行。我会鼓励你把它当作一个问题，因为你会定制解决方案的视觉差异的市场份额不到3％，甚至可能你的实际收视率更低。

的CSS

.ui-autocomplete { 
    max-height: 200px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

.ui-autocomplete .ui-menu-item a { 
    padding-right: 20px; 
} 

这些样式添加到您的项目，以帮助有视觉显示。 .ui-autocomplete样式对于创建可滚动的菜单项目列表相当标准，并且您可能已经在使用它了。适用于锚点的正确填充是为Firefox和Webkit浏览器中的滚动条提供适当的空间。它比直接应用于UL容器更好。

jQuery的

$(".myAutoComplete").autocomplete({ 
    ... 
    open: function(e, ui) { 
     $("ul.ui-autocomplete:visible").css("width", "").find("a").html(function(i, html) { 
      return html.replace(/\s/g, " "); 
     }); 
    } 
    ... 
}); 

绑定到开放事件的处理是在它的作用主要是显而易见的。首先，它使用的选择器查找唯一可见的自动完成菜单。谢天谢地，只有在显示自动完成菜单后，才会打开该事件。这有助于您的处理程序在网页上有多个自动填充小部件的情况下引起注意。从那里，它将删除直接应用于无序列表的CSS的“width”属性。然后，在列表中查找所有的锚后裔，并没有一个全球性的与非中断空格在HTML中的所有空白代替。该NBSP迫使锚通过增加其宽度，而不是文本换行到一个新行，从而提高整个菜单的宽度做出回应。

您可以see a working demo here。我建议在“ab”后面加上“deep”，以便在发生变化时查看调整大小的差异。对不起，代码中的颜色很长（sorce），但我想让您有机会获得一系列可能的建议，以查看调整大小的差异。

编辑

不知道我在想什么，但今天，更简单的方法是提供以下附加风格和沟开放的事件处理程序：

.ui-autocomplete .ui-menu-item a { 
    white-space: nowrap; 
} 

Answer 2

在在CSS确保宽度设置为auto：

.ui-autocomplete { 
    height: 250px; 
    max-height: 250px; 
    overflow-y: auto; 
    /* prevent horizontal scrollbar */ 
    width:auto; 
} 

凡自动完成小部件CRE ates列表项将li空白样式设置为nowrap：

input.data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li style='white-space:nowrap;'></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + "</a>") 
     .appendTo(ul); 
};