TextArea下拉菜单-不下推页面内容

Question

我有一个文本区域，可在用户键入文本时提供实时建议。 这些建议显示在下拉菜单中。 我遇到的问题是下拉菜单覆盖了位于文本区域正下方的DIV的一部分。

当下拉列表打开时，我需要下推页面内容，因此整个页面内容始终可见。

HTML代码：

<textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>

<div id="quickHelpWrapper">
        <br><small><b>Quick Help</b></small>
        <div id="quickHelp">
            Additional Info 1<br>
            Additional Info 2<br>
            Additional Info 3<br>
            Additional Info 4<br>
            Additional Info 5<br>
        </div>
    </div>

本质上，我需要一个名为quickHelpWrapper的DIV，在打开textarea下拉列表时将其按下。

JSfiddle上的示例：https://jsfiddle.net/jarosciak/kjy149p5/

这是屏幕截图：

Answer 1

您在此处使用的jQuery UI自动完成功能相对地定位了此元素-因此您必须将其覆盖。 （position选项无法修复此AFAIK，因为这仅允许指定元素相对于另一个元素的位置，但不允许指定“请完全不定位”。）< / p>

您可以通过以下三个步骤解决此问题：

在文本区域周围放置一个容器元素（因为我们不能将元素直接附加到文本区域）：

<div id="foo">
  <textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>
</div>

将appendTo选项添加到您的自动完成初始化中：

.autocomplete({
  delay: 50,
  minLength: 1,
  multiline: true,
  autoFocus: true,
  appendTo: '#foo',
  source: function(request, response) {
    …

最后，将其添加到样式表中，以覆盖此插件设置的position: relative内联样式，

.ui-autocomplete {
    position: static !important;
}

您的示例，进行了相应的修改：https://jsfiddle.net/kjy149p5/17/

Answer 2

添加了CSS：

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete
{
  position:relative;
  max-width:524px;
}

链接：

https://jsfiddle.net/kjy149p5/20/