Jquery位置选择器自动完成在引导模式中不起作用

Posted 2023-02-23

【中文标题】Jquery位置选择器自动完成在引导模式中不起作用

【英文标题】：Jquery location picker autocomplete doesn't work in bootstrap modal

【发布时间】：2017-01-03 13:55:45

【问题描述】：

我在引导模式中使用 jquery 位置选择器。它会打开地图，但自动完成建议不可见。

html和javascript代码如下。

$timeout(function() 
   $('#onboardingModal').on('shown.bs.modal', function() 
   $('#mappicker').locationpicker(
      location: 
         latitude: 12.9715987,
         longitude: 77.59456269999998
      ,
      radius: 200,
      inputBinding: 
         locationNameInput: $('#locationInput')
      ,
      enableAutocomplete: true,
      autocompleteOptions: 
          componentRestrictions: country: 'in'
      ,
      onchanged: function (currentLocation, radius, isMarkerDropped) 
                          var addressComponents = $(this).locationpicker('map').location.addressComponents;
                          $scope.lat = $(this).locationpicker('map').location.latitude
                          $scope.lng = $(this).locationpicker('map').location.longitude
                          // updateControls(addressComponents);
       ,
    );
  );
);

<div class="modal fade" id="onboardingModal" tabindex="-1" role="dialog" aria-labelledby="onboardingModalLabel" style="overflow:hidden" data-backdrop="static" data-keyboard="false">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
          <div class="form-group">  
             <label for="locationInput">LOCATION</label>
             <input type="text" class="form-control" id="locationInput" placeholder="Search"/> 
             <div align="center" class="map" id="mappicker" style="width: 500px !important; height: 300px"></div>
          </div>
      </div>
   </div>
</div>

尝试更改 z-index 还添加了 jquery 的 ui-front 类，在这两种情况下都不起作用。 我在这做错了什么？

【问题讨论】：

你能提供一个小提琴来证明你的问题吗？

【参考方案1】：

我在 github 中的一个问题中得到了答案。需要将 z-index 添加到 pac-container。

.pac-containerz-index:2000 !important;

参考：Github issue