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

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

你可以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;
}

自动完成窗口小部件创建列表项时，将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 );
};

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

2 个答案: