Bootstrap 4模态框遮挡Autocomplete下拉列表问题求助

问题说明 #

Google Places自动补全的下拉列表显示在Bootstrap模态框后方，无法选择选项。已尝试以下两种方案但均无效：

• 设置CSS样式：

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

• 配置jQuery Autocomplete：

$("#autocomplete").autocomplete({
    appendTo : "#AddVenueFormModal",
    source: DataArray
});

已排查拼写错误，更换为Bootstrap起始模板后问题依旧。

完整代码 #

HTML代码 #

{% extends 'main/base.html'%}
{%load static %}
{% load crispy_forms_tags %}
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="{% static 'google_places_names.js' %}"></script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXX=places&callback=initAutocomplete"></script>
    
        <script>$("#autocomplete").autocomplete({
            appendTo : "#AddVenueFormModal",
            source: DataArray
        });</script>
    
    </head>
{% block content %}
                <a class="btn btn-outline-secondary btn-sm" href ="" data-toggle="modal" data-target="#AddVenueFormModal" ><font size="3px" color="#008083">Can't find the venue?</font></a>

            
            <!--MODAL STARTS HERE-->
            <div class="modal" class="modal fade ui-front" tabindex="-1" id = "AddVenueFormModal">
                
                <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>

                    <div class="modal-body ui-front">
                        <input id="autocomplete" style ="width: 500px "placeholder="Enter your address">
                        
                        <form id="venue_form" method="POST">

                            {% csrf_token %}
                            {{ venue_form}}
                    
                
                            <button type="submit" name="btnvenue_form" value="Submit" id="profile-btn">Validate</button>
                        </form>
                    </div>

                    <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    </div>

                </div>
                </div>
            </div>
            <!--MODAL ENDS HERE-->
{% endblock %}
</html>

JS代码（google_places_names.js） #

function initAutocomplete(){  
  autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"),{
    componentRestrictions: {'country':['uk']},
    fields: ['name','geometry','address_components'],
    types:['establishment','geocode']
  });

   autocomplete.addListener('place_changed', fillInAddress );
}

解决方案 #

核心问题分析 #

你混淆了jQuery UI Autocomplete和Google Places Autocomplete两个完全不同的组件：

• 你的实际业务逻辑用的是Google Places Autocomplete，但尝试的修复方案都是针对jQuery UI Autocomplete的，因此完全无效。
• Google Places Autocomplete的下拉列表容器类名为.pac-container，而非jQuery UI的.ui-autocomplete。

正确的CSS修复 #

添加以下CSS样式，确保下拉列表z-index高于Bootstrap模态框（默认z-index为1050）：

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

额外代码优化 #

你的HTML和脚本存在几个小问题，建议同步修正：

1. 模态框div重复设置class属性，合并为：

<div class="modal fade ui-front" tabindex="-1" id="AddVenueFormModal">

2. 谷歌地图API URL存在语法错误，修正为：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXX&libraries=places&callback=initAutocomplete"></script>

3. 移除不必要的jQuery UI Autocomplete初始化代码，避免组件冲突。

内容的提问来源于stack exchange，提问作者PhilM