CSS 使用带有位置的 div 中的输入字段时，JqueryUi 自动完成显示在错误的位置：已修复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12234802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed
提问by JeanValjean
I have a "modal window" in a webpage obtained by applying to a divthe css property positionto fixed. The divcontains input fields. In particular, I'm using the autocomplete widgetfrom jQueryUI. There are two major problems:
我有一个“模态窗口中通过向一个获得网页” divCSS属性position来fixed。该div包含输入字段。特别是，我使用的是自动完成构件从jQueryUI的。有两个主要问题：
1) the first is that, since the div has a fixed position, when you scroll down the webpage, the autocomplete suggestions are not shown fixed but are moved up and down with the page. You can see that problem at this Codepenwhere I'm using an example from jQuery website with city-name autocompletion.
1）第一个是，由于div具有固定位置，当您向下滚动网页时，自动完成建议不会固定显示，而是随页面上下移动。你可以在这个Codepen上看到这个问题，我正在使用来自 jQuery 网站的一个带有城市名称自动完成功能的例子。
2) The second problem is that the suggestions from autocomplete are shown in the upper-left corner of the page and not just below the input field. Unfortunately, I tried to reproduce this problem in Codepen, but I can't.
2）第二个问题是自动完成的建议显示在页面的左上角，而不是仅在输入字段下方。不幸的是，我试图在 Codepen 中重现这个问题，但我不能。
I'm quite sure that the problem is due to the CSS, and in particular to such style properties provided by the JQuery-UI. Maybe the problem can be resolved by using the position optionof the autocomplete widget.
我很确定问题出在 CSS 上，尤其是 JQuery-UI 提供的此类样式属性。也许问题可以通过使用自动完成小部件的位置选项来解决。
What CSS property should I define and how?
我应该定义什么 CSS 属性以及如何定义？
PS: I use the theme provided at http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.
PS：我使用http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css提供的主题。
回答by JeanValjean
Looking at the jQuery UI library, I see that the <ul>element is used to show the suggestions. jQuery UI appends this element by default to the HTML document and not to the <div>(used as "modal window") of the text input.
查看 jQuery UI 库，我看到<ul>元素用于显示建议。默认情况下，jQuery UI 将此元素附加到 HTML 文档，而不是附加到文本输入的<div>（用作“模式窗口”）。
However, the documentation shows that the option appendToconfigures which element the autocomplete <ul>should be appended to. It uses jQuery's appendTo()function.
http://jqueryui.com/demos/autocomplete/#option-appendTo
但是，文档显示选项appendTo配置自动完成<ul>应该附加到哪个元素。它使用jQuery的appendTo()功能。
http://jqueryui.com/demos/autocomplete/#option-appendTo
So, I included a div to contains the suggestions:
所以，我包含了一个 div 来包含这些建议：
<input type="text" id="myInput" />
<div id="container">
</div>
And in the autocomplete()function I added the option:
在autocomplete()函数中我添加了选项：
appendTo: "#container"
Then I added the following CSS
然后我添加了以下 CSS
#container {
display: block;
position:relative
}
.ui-autocomplete {
position: absolute;
}
That's all!
就这样！
回答by Mikeys4u
Make sure you only load one version of Jquery and one of the UI I discovered this after reading @Riapp's answer, I played around and could see that you need matching version numbers and never too many....
确保你只加载一个版本的 Jquery 和一个 UI 我在阅读@Riapp 的回答后发现了这一点，我玩了一会儿，可以看到你需要匹配的版本号，而且永远不会太多......
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" />
回答by rogerthat
had the same problem. Delete jquerUI base themes, Uninstall jqueryUI library then reinstall jqueryUI and now works fine. Not sure what you're working with but I'm on MVC4 so many bugs, I'm about to kill myself. Good Luck.
有同样的问题。删除 jquerUI 基本主题，卸载 jqueryUI 库，然后重新安装 jqueryUI，现在工作正常。不确定你在做什么，但我在 MVC4 上有很多错误，我要自杀了。祝你好运。
EDIT: this was the real problem
编辑：这是真正的问题
In looking at an older project to see if the autocomplete was working we found that many of the styles in the older project were not in the newer. Not sure if I erased them but can't imagine doing so. All I had to do was copy and paste those classes that were missing from my new project and everything went back to normal. I think someone is sabotaging my project.
在查看旧项目以查看自动完成功能是否有效时，我们发现旧项目中的许多样式不在新项目中。不确定我是否删除了它们，但无法想象这样做。我所要做的就是复制并粘贴我的新项目中缺少的那些类，一切都恢复正常。我认为有人在破坏我的项目。
