jquery - 如何在另一个自动缩放的 div 中获得自动完成结果？

Question

我想在另一个自动缩放（高度）div 中获得自动完成结果。

这是我的代码：

var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++"
    ];
    $( "#search" ).autocomplete({
        source: availableTags,
        open: function(event, ui) {
          $('ul.ui-autocomplete').removeAttr('style').hide().appendTo('.searchSuggest').show();
        }
    });

<div class="searchSuggest"></div>
<div class="anotherDiv"></div>

除了未缩放（高度）的searchSuggest div 外，一切都很好，所以我的结果出现在下一个 div 上。我想知道如何自动缩放我的searchSuggest div。

任何想法 ？

谢谢 ！

Answer 1

你使用 jQuery UI CSS 框架吗？

IMO 有两件事会阻止容器searchSuggest与结果列表一起增长（.ui-menu实际上是一个小部件）

• ul.ui-autocompletehas ，这position: absolute意味着元素不在流中

• 它也有float: left，以及菜单项

您可以覆盖这些设置：

.searchSuggest .ui-autocomplete {
    position: relative;
    float: none;
}

.searchSuggest .ui-menu .ui-menu-item {
    float: none;
}

演示