谷歌自动完成不显示在模态 - JavaScript

问题描述

当在模态框中使用谷歌自动完成控件时，可能会出现自动完成下拉框不显示的问题。

原因分析

这可能是由于模态框的 z-index 值过高，导致下拉框被覆盖。因为谷歌自动完成控件使用了绝对定位，而其父元素（通常是 input 元素）的 z-index 值通常为 1，此时下拉框的 z-index 值默认为比父元素高，因此被模态框的遮罩层覆盖，导致无法显示。

解决方法

方法一：修改谷歌自动完成控件的 z-index 值

我们可以通过设置自动完成控件的 z-index 值，让其覆盖模态框的遮罩层，从而实现下拉框可见。

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

方法二：调整模态框和自动完成控件的 z-index 值

如果使用方法一无效，可以尝试调整模态框和自动完成控件的 z-index 值，确保自动完成下拉框在模态框上方。在实现的过程中，需要根据实际情况调整具体的 z-index 值。

.ui-autocomplete {
    z-index: 1051 !important;
}
.modal {
    z-index: 1050;
}

总结

以上是解决谷歌自动完成控件在模态框中不显示的方法，可以根据实际情况选择其中一种方法进行实现。