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

Question

我有一个" 模态窗口中通过向一个获得网页" divCSS属性position来fixed.该div包含输入字段.特别是,我使用的是自动完成构件从jQueryUI的.有两个主要问题:

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

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

我很确定问题是由CSS引起的,特别是由JQuery-UI提供的这种样式属性.也许可以通过使用自动完成小部件的位置选项来解决问题.

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

Answer 1

查看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;
}

就这样!