我在模态对话框启动程序内的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。

正确的位置是“绝对”，而您需要将其指定为自动完成的选项：

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

在可以将框与结果绑定到任何元素的位置，我必须停止将其固定在表单的类中！

这是工作中的JsFiddle！。

上面讨论该z-index问题的解决方案有效：

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

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

请查看appendTo文档：

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

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

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

实际的问题是，Bootstrap Modal具有比页面中任何其他元素更高的Z-index。因此，自动完成实际上可以工作-但是它被隐藏在对话框的后面。

您只需要在您添加的任何css文件中添加它：

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

为了解决这个问题，我只需要css通过jQuery更改文件即可：

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

注意：在jquery-ui.css和jquery-ui.js之后添加此CSS

只需尝试添加以下内容：

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

只要确保您赋予该物业很高的价值，并添加

！重要

真的很重要 后者将告诉您的浏览器先执行此规则，然后再执行其他相同类。希望对你有帮助

添加appendTo选项解决了此问题。它将菜单附加到引导模型中的对象之一。

我解决了这个...

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

自动完成扩展程序的完成列表具有一个带标识符的ID，例如id =' _completionListElem '

因此，您必须先将z-index ..向上推，然后再向上引导模块面板;）

希望能帮助到你

在文件中：styles.css

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

我在组件的内部css文件中尝试了所有解决方案，但只有将其移至styles.css后，它才起作用。

祝好运

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