Google Nơi Autocomplete không hiển thị trong Bootstrap modal

FIX UPDATE: Dường như cách tôi đã khởi tạo hộp đã gây ra vấn đề đây là những gì cố định nóGoogle Nơi Autocomplete không hiển thị trong Bootstrap modal

<script> 
    $(function() { 
     var input = document.getElementById("keyword"); 
     var autocomplete = new google.maps.places.Autocomplete(input); 

     $('#my-modal').modal('show'); 

    }); 

</script> 
<style> 
    .pac-container { 
     z-index: 10000 !important; 
    } 
</style>

UPDATE: Tôi đã cập nhật mã được rất đơn giản, lý do công việc này http://jsfiddle.net/g8vxmLn9/1/ là bởi vì nó sử dụng bootstrap cũ và jquery vì vậy tôi giả sử vì tôi đang sử dụng mới hơn tôi đang gặp vấn đề.

Tôi chỉ muốn hiển thị hộp tự động điền trong mô hình khởi động (3.3) và cho phép hiển thị kết quả khi bạn nhập.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
<title>Test</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"> </script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</head> 
<body> 
<div> 
    <div id="my-modal" class="modal" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <input name="keyword" id="keyword" type="text" /> 
      </div> 

     </div> 
    </div> 
</div> 
<script> 
    $(function() { 
     $("#my-modal").modal({ 
      show: false 
     }).on("shown", function() { 
      var input = document.getElementById("keyword"); 
      var autocomplete = new google.maps.places.Autocomplete(input); 

     }); 
     $('#my-modal').modal('show'); 
    }); 
</script> 
</body> 
</html>

Nguồn

2016-03-20 Zoinky

'id = "map_canvas" 'không được định nghĩa trong JS – Shehary

@Shehary tôi cập nhật mã để nó đơn giản và không có gì để làm với vải, vẫn công việc doesnt – Zoinky

này cố định nó

<script> 
    $(function() { 
     var input = document.getElementById("keyword"); 
     var autocomplete = new google.maps.places.Autocomplete(input); 

     $('#my-modal').modal('show'); 

    }); 

</script> 
<style> 
    .pac-container { 
     z-index: 10000 !important; 
    } 
</style>

Nguồn

2016-03-20 16:16:10 Zoinky

Điều này phù hợp với tôi –

_Explanation_: '.pac-container' là phần tử div gói của kết quả Tự động hoàn thành của Google. Trong trường hợp này, phương thức đã có chỉ số 'z-index' cao. Vì vậy, bạn phải đặt cao hơn 'z-index' so với phương thức – Eranda

Nếu bạn vẫn đang tìm kiếm.

    var pacContainerInitialized = false; 
        $('#inputField').keypress(function() { 
          if (!pacContainerInitialized) { 
            $('.pac-container').css('z-index', '9999'); 
            pacContainerInitialized = true; 
          } 
        });

Nguồn

2017-02-10 14:42:04 ashwin1103

Cảm ơn, đã làm việc cho tôi! –

Google Nơi Autocomplete không hiển thị trong Bootstrap modal

Trả lời

Các vấn đề liên quan