时间戳

首页 > 解决方案 > TextArea 下拉菜单 - 不下推页面内容

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

问题描述

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

这是一个屏幕截图： 在此处输入图像描述

标签： javascriptjqueryhtmlcss

解决方案

您在此处使用的 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/

推荐阅读