javascript - 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，因为它只允许指定元素相对于另一个元素的定位位置，但它不允许指定“请不要定位。 ”)

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

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

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