jQuery UI - 自动完成 - 根据内容动态设置

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

绑定到 open 事件的处理程序的作用非常明显。首先，它使用的选择器查找唯一可见的自动完成菜单。值得庆幸的是，只有在显示自动完成菜单后才会引发 open 事件。如果页面上有多个自动完成小部件，这将帮助您的处理程序引导其注意力。从那里，它删除了直接应用于无序列表 CSS 的“宽度”属性。然后，它找到列表中的所有锚点后代，并用不间断空格对其 HTML 中的所有空白进行全局替换。 nbsp 强制锚点通过增加其宽度而不是将文本换行来进行响应，从而增加整个菜单的宽度。

您可以在此处查看工作演示。我建议输入“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;
}

自动完成小部件创建列表项的位置将 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 );
};