如何使jquery自动完成不覆盖它下面的其他内容？

Question

目前，我有一个文本框，下面有一些文字......我不希望这些建议隐藏我的基础文本..我该怎么办？

我准备好您的样本：http://jsfiddle.net/xvVKW/18/

编辑：

显然，似乎问题并不是告诉我想要什么，所以这里有：

我希望下面的<div>稍微向下移动，就像谷歌搜索“即时启动”的工作方式一样......他们将结果移动到建议位置。

编辑：

@thirtydot在[接受的答案]下面回答的问题相当顺利 但是我已经做了一些事情来改变jquery-ui的类来暂时为我做这个工作。我在jquery的css文件中从类position: absolute;中删除了ui-autocomplete。这也有效......

Answer 1

Live Demo

我添加了这个CSS：

#results {
    position: relative
}

并改变了您的JavaScript：

$("#tags").autocomplete({
    source: availableTags,
    open: function(event, ui) {
        $('#results').css('top', $('.ui-autocomplete').height() + 8);
    },
    close: function(event, ui) {
        $('#results').css('top', 0);
    }
});

Answer 2

这可能需要一些调整但似乎有效。

$("#tags").autocomplete({
   source: availableTags
});

$("#results").insertAfter(".ui-autocomplete");

Answer 3

你可以做到

.ui-widget-content {
    background-color:transparent;
}

Answer 4

建议列表显示在绝对定位的DIV中。查看代码并搜索CSS样式。

解决方案是将DIV添加到文本字段下方的页面HTML代码中，并删除任何position: CSS样式。由于它是空的，它不占用任何空间。添加内容后，它会根据需要增长。