jQuery 自动完成问题进入引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16133654/
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
Autocomplete issue into bootstrap modal
提问by Lughino
I have a display problem in the jQuery autocomplete inside a modal dialog bootstrap.
我在模态对话框引导程序内的 jQuery 自动完成中有一个显示问题。
When I mouse scroll, the results do not remain attached to the input.
当我用鼠标滚动时，结果不会保持附加到输入。
Is there a way to solve this?
有没有办法解决这个问题？
Here JsFiddle:
这里JsFiddle：
.ui-autocomplete-input {
border: none;
font-size: 14px;
width: 300px;
height: 24px;
margin-bottom: 5px;
padding-top: 2px;
border: 1px solid #DDD !important;
padding-top: 0px !important;
z-index: 1511;
position: relative;
}
EDITI found the problem:
编辑我发现了问题：
.ui-autocomplete {
position: fixed;
.....
}
If the modal has scroll the issue remains!
如果模态有滚动，问题仍然存在！
Here JsFiddle/1.
这里JsFiddle/1。
回答by Lughino
The position is right that it is "absolute", while you need to specify this as an option to autocomplete:
位置是正确的，它是“绝对的”，而您需要将此指定为自动完成的选项：
$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );
Where it can anchor the box with the results in any element, I have to stop it from being anchored to the form's class!
它可以将带有结果的框锚定在任何元素中，我必须阻止它锚定到表单的类！
Here is a working JsFiddle!.
回答by Tolga K?seo?lu
The above solution talking about the z-indexissue worked:
上面讨论这个z-index问题的解决方案有效：
.ui-autocomplete { z-index:2147483647; }
Make sure you put it before your .jsscript responsible for handling the modal AND autocomplete logic.
确保将它放在.js负责处理模态和自动完成逻辑的脚本之前。
回答by Fernando Pinheiro
Check out the appendTo documentation:
When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element.
当值为空时，将检查输入字段的父级是否为 ui-front 类。如果找到具有 ui-front 类的元素，则菜单将附加到该元素。
So just add the class "ui-front" to the parent elementand the autocomplete will be correctly displayed inside the modal.
因此，只需将类“ui-front”添加到父元素，自动完成功能就会正确显示在模态中。
回答by Skarimi
With add the class "ui-front"to the div parent element and the autocomplete will be correctly displayed inside the PopUp For Me.
将类“ui-front”添加到 div 父元素，自动完成功能将正确显示在 PopUp For Me 中。
回答by Sunil
The actual issue is that the Bootstrap Modal has a higher Z-index than any other element in the page. Thus, auto complete actually works - but it gets hidden behind the dialog.
实际问题是 Bootstrap Modal 的 Z-index 比页面中的任何其他元素都高。因此，自动完成实际上有效 - 但它隐藏在对话框后面。
You just need to add this in any of your added cssfiles:
你只需要在你添加的任何css文件中添加它：
.ui-autocomplete {
z-index:2147483647;
}
回答by dsandrade
To fix this I just needed to alter in the cssfile by jQuery:
为了解决这个问题，我只需要css通过 jQuery在文件中进行更改：
.ui-front {
z-index: 9999;
}
Note: Add this css after jquery-ui.css & jquery-ui.js
注意：在 jquery-ui.css & jquery-ui.js 之后添加这个 css
回答by The Humble Angy
just try adding this:
试试添加这个：
.ui-autocomplete {
z-index: 215000000 !important;
}Just make sure you give a high value to the property and DO ADD
只需确保您对该物业给予高价值并添加
!important
！重要的
It really matters. The latter will tell your browser to execute this rule first, before any other of the same class. Hope it will help
这真的很重要。后者将告诉您的浏览器在任何其他同类之前先执行此规则。希望它会有所帮助
回答by Harish kakani
Adding the appendTooption resolved this issue. It appended the menu to one of the objects in the bootstrap model.
添加appendTo选项解决了这个问题。它将菜单附加到引导模型中的对象之一。
回答by user5541665
I solved by this....
我是这样解决的....
/********************************************************************
* CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt *
********************************************************************/
ul[id*='_completionListElem'] {
z-index: 215000000 !important;
}
Autocomplete extender completion list has an utomated ID like this id='_completionListElem'
自动完成扩展程序完成列表有一个自动 ID，如 id=' _completionListElem'
so you must push up the z-index .. upper then the bootstrap modal panel ;)
所以你必须向上推 z-index .. upper 然后是 bootstrap 模式面板 ;)
Hope it helps
希望能帮助到你
回答by Jesus Ob Ac
.ui-front {
z-index: 9999;
}
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog ui-front">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
