javascript - 从输入字段宽度分离自动完成框的大小

据我所知，谷歌的自动填充框的宽度始终与其所属的输入字段相同。

<input type="text" id="autoTest">

#autoTest{
  width: 40px;
}

结果：



和

#autoTest{
  width: 400px;

}

结果：



有什么方法可以实现更大的宽度，而无需更改输入字段的宽度。因为在我看来这是没有选择的。用户在选择一个完整的街道名称后，在输入字段中显示整个街道名称也无关紧要。

我很欣赏一个干净的解决方案，但是，如果那不可能，我也会采取一种解决方法。

最佳答案

使用选择器.pac-container将自定义样式应用于下拉列表：

function initialize() {

  new google.maps.places.Autocomplete(document.getElementById('autoTest'))
}
google.maps.event.addDomListener(window, 'load', initialize);

.pac-container {
  width: 400px !important;
}
#autoTest {
  width: 40px;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places">
</script>
<input id="autoTest"/>