自动完成框大小与输入字段宽度的分离答案

【问题标题】：Detachment of Autocomplete Box size from input-field width自动完成框大小与输入字段宽度的分离
【发布时间】：2016-07-29 13:02:03
【问题描述】：

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

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

#autoTest{
  width: 40px;
}

结果：

还有

#autoTest{
  width: 400px;

}

结果：

有没有办法在不改变输入字段宽度的情况下实现更大的宽度。因为在我的情况下这是没有选择的。对于用户来说，在他选择了一个之后让整个街道名称显示在输入字段中也是无关紧要的。

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3 autocomplete

【解决方案1】：

使用选择器.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"/>

【讨论】：