自动完成问题进入引导模式

在模态对话框引导程序内的 jQuery 自动完成中有一个显示问题。

当我鼠标滚动时，结果不会保持附加到输入。

有办法解决吗？

这里 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;
}

剪辑 我发现了问题所在:

.ui-autocomplete {
position: fixed;
.....
}

如果模态有滚动的问题仍然存在！

这里是 JsFiddle/1。

92338 次浏览
小开
最佳答案

这个位置是正确的，它是“绝对的”，而您需要将其指定为 自动补全的一个选项:

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

在它可以锚定框的任何元素的结果，我必须阻止它锚定到窗体的类！

这里是 是一个工作的 JsFiddle！。

小开

实际问题是 Bootstrap Modal 的 Z 索引比页面中的任何其他元素都高。因此，自动完成实际上工作-但它得到隐藏在对话框后面。

你只需要在你添加的任何 css文件中添加这个:

.ui-autocomplete {
z-index:2147483647;
}
小开

上述谈论 z-index问题的解决办法奏效了:

.ui-autocomplete { z-index:2147483647; }

确保将它放在负责处理模态和自动完成逻辑的 .js脚本之前。

小开

查看下面的附录文档 :

当值为 null 时，输入字段的父字段将为 检查 ui-front 类。如果带有 ui-front 类的元素 如果找到该元素，则菜单将附加到该元素。

因此，只需将类“ ui-front”添加到父元素和自动完成将正确显示在模式内。

小开

为了解决这个问题，我只需要通过 jQuery 在 css文件中进行修改:

.ui-front {
z-index: 9999;
}

注意: 在 jquery-ui. css 和 jquery-ui. js 之后添加这个 css

小开

添加 appendTo选项解决了这个问题。

小开

试着加上这个:

.ui-autocomplete {
z-index: 215000000 !important;
}

只要确保您给予高价值的财产和 一定要加

很重要

真的很重要。后者将告诉您的浏览器首先执行此规则，然后执行同一类中的任何其他规则。 希望能有所帮助

小开

通过将类 “ ui-front”添加到 div 父元素，自动完成将正确显示在 PopUp For Me 中。

小开 
.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>
小开

我用这个解决了..。

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
z-index: 215000000 !important;
}

自动完成扩展程序完成列表具有如下自动 ID Id = ‘ _ completionListElem’

所以必须向上推 z-index. . top，然后是 bootstrap 模态面板;)

希望能有帮助

小开

在文件中: styles.css

.cdk-overlay-container
{
z-index: 9999 !important;
}

我尝试了组件的内部 css 文件中的所有解决方案，但是没有一个方案是有效的，只有当它移动到 styles.css 时才有效。

祝你好运

小开 
<style>
.ui-front {
z-index: 5000;
position: relative;
}
</style>

提交答案