Question

我在网页中有一个“模态窗口”，它是通过将div css属性position应用到fixed而获得的。 div包含输入字段。特别是，我正在使用 jQueryUI 中的自动完成小部件。有两个主要问题：

1）第一个是，由于div具有固定位置，当您向下滚动网页时，自动填充建议不会显示为固定，而是随页面上下移动。你可以在 Codepen 上看到这个问题，我在jQuery网站上使用了城市名称自动完成的示例。

2）第二个问题是自动完成的建议显示在页面的左上角，而不是在输入字段的下方。不幸的是，我试图在Codepen中重现这个问题，但我不能。

我很确定问题是由CSS引起的，特别是由JQuery-UI提供的这种样式属性。也许可以使用自动完成小部件的position option来解决问题。

我应该定义什么CSS属性以及如何定义？

PS：我使用 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css 提供的主题。

Answer 1

查看jQuery UI库，我看到＆lt; ul＆gt; 元素用于显示建议。 jQuery UI默认将此元素附加到HTML文档，而不是文本输入的＆lt; div＆gt; （用作“模态窗口”）。

但是，文档显示选项 appendTo 会配置应附加自动填充＆lt; ul＆gt; 的元素。它使用jQuery的appendTo()函数。 http://jqueryui.com/demos/autocomplete/#option-appendTo

所以，我添加了一个包含建议的div：

<input type="text" id="myInput" />
<div id="container">
</div>

在autocomplete()函数中我添加了选项：

appendTo: "#container"

然后我添加了以下CSS

#container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}

这就是全部！

Answer 2

确保只加载一个版本的Jquery和一个UI 我在阅读了@ Riapp的回答之后发现了这个，我玩了一遍，可以看到你需要匹配的版本号而且从来没有太多......

否则自动完成将是绝对的，并飞到顶部。

 <script type="text/javascript"
    src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css"
    href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />

Answer 3

有同样的问题。删除jquerUI基本主题，卸载jqueryUI库然后重新安装jqueryUI，现在工作正常。不知道你在做什么，但我在MVC4上有这么多错误，我要杀了自己。祝你好运。

编辑：这是真正的问题

在查看较旧的项目以查看自动完成是否正常时，我们发现旧项目中的许多样式都不是较新的。不确定我是否删除了它们但无法想象这样做。我所要做的就是复制并粘贴我的新项目中缺少的那些类，一切都恢复正常。我认为有人在破坏我的项目。

在div中使用位置：fixed的输入字段时，JqueryUi自动完成显示在错误的位置

3 个答案: