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

【问题标题】：TextArea drop-down menu - Doesn't push down the page contentTextArea 下拉菜单 - 不下推页面内容
【发布时间】：2018-10-17 18:11:41
【问题描述】：

我有一个文本区域，可在用户键入文本时提供实时建议。这些建议显示在下拉菜单中。我遇到的问题是下拉菜单涵盖了位于文本区域正下方的部分 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/

这是一个截图：

【问题讨论】：

你能展示一下这些元素的风格吗？
JSfiddle 上的示例：jsfiddle.net/jarosciak/kjy149p5
它工作得很好。尝试键入多个字符。例如单词“受体”并等待一秒钟，下拉菜单将打开。
您在此处使用的 jQuery UI 自动完成功能相对定位此元素 - 因此您必须覆盖它。（position 选项无法修复此 AFAIK，因为它只允许指定元素相对于另一个元素的定位位置，但不允许指定“请不要定位”。）如果你覆盖来自.ui-autocomplete 和position: static 的插件的内联样式（研究，如果你不知道的话），[...]
请看我的回答，完成步骤和你的小提琴示例的修改版本:-)

标签： javascript jquery html css

【解决方案1】：

您在此处使用的 jQuery UI 自动完成功能相对定位此元素 - 因此您必须覆盖它。（position 选项无法修复此 AFAIK，因为它只允许指定元素相对于另一个元素的定位位置，但不允许指定“请不要定位”。）

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

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

<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/

【讨论】：

这太棒了，就像一个魅力。没有你的帮助，我无法解决这个问题。非常感谢，您为我节省了很多时间。

【解决方案2】：

添加了css：

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

链接：

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

【讨论】：