14

我在通过将cssdiv属性position应用于fixed. div包含输入字段。特别是，我正在使用 jQueryUI 中的自动完成小部件。有两个主要问题：

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

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

我很确定问题出在 CSS 上，尤其是 JQuery-UI 提供的此类样式属性。也许可以通过使用自动完成小部件的位置选项来解决问题。

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

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

4

3 回答 3

53

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

但是，文档显示选项appendTo配置自动完成<ul>应该附加到哪个元素。它使用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;
}

就这样！

于 2012-09-02T13:52:37.250 回答
3

确保您只加载一个版本的 Jquery 和我在阅读 @Riapp 的答案后发现的 UI 之一，我玩过，可以看到您需要匹配的版本号，而且永远不会太多......

Otherwise the autocomplete will be an absolute, and fly to the top.

 <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" />
于 2015-05-09T00:25:27.440 回答
1

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

编辑：这是真正的问题

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

于 2013-08-12T22:18:07.867 回答