Ajax 自动完成，带有定制的弹出位置答案

【问题标题】：Ajax auto-complete, with bespoke popup locationAjax 自动完成，带有定制的弹出位置
【发布时间】：2011-03-12 23:41:04
【问题描述】：

我正在做一些涉及 ajax 自动完成 <textarea> 中的短语的事情。使用 jquery 自动完成插件我已经很好地工作了；但是，将弹出窗口位于<textarea>下方是硬编码的。

对于我正在处理的内容，<textarea> 位于页面底部；理想情况下，我希望选项出现在上方<textarea>。

是否有类似的现有（和半体面的）自动完成脚本允许这样做？我的其他选择是：

建议？

关于信息，这是我最终得到的结果：

#known-parent .ac_results 
{
    position: fixed !important;
    top: auto !important;
    bottom: 80px !important;
}

【问题讨论】：

【解决方案1】：

您可以更改弹出窗口的 CSS 并将负值分配给 margin-top 吗？这应该会将内容移到顶部，但您的结果会看起来有点奇怪，因为相关值将位于顶部。

不也可以编辑自动补全插件来编辑容器的style并移动框的位置吗？我认为这不会太难，但我有一段时间没有看到那个插件了。

<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div>

您需要在插件代码中进行调整。

编辑：我实际上不推荐这个。应该有一种方法可以在 UI 插件中反转结果顺序。这样做，并改变样式值，你应该有一个干净的结果集。有机会我会添加确切的代码

【讨论】：

【解决方案2】：

这不是世界上最干净的解决方案，但您可以通过在 CSS 中使用“！important”来覆盖自动完成插件写入的样式属性。

无论如何，样式都尽可能属于 CSS。

如果我没记错的话，插件在自动建议 div 的“style”属性中设置了“top”值。

在你的 css 中你应该能够做到：

#whatever_the_id_of_the_box_is {
    position: absolute !important;
    top: {{ whatever value you want here }} !important;
}

【讨论】：