您如何deviseGoogle Places自动填充API的下拉菜单？
在使用Google地方信息/地图自动填充API时，我们需要调整显示自动填充地点build议的下拉式样。
有谁知道这是甚至可能吗？ 如果是这样，我想我们只需要知道CSS的classnames / id。
这里有一个屏幕截图：
Screengrab>
如果你使用萤火虫（如你的问题的评论中所提到的），你会发现具有自动完成结果的容器是一个类“pac-container”的DIV，并且其中的build议被作为DIV与类“ PAC-项目”。 所以只是与CSS的风格。
这现在由谷歌logging： https ： //google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
这个CSS将允许下拉菜单resize以适应结果的宽度：
.pac-container, .pac-item { width: inherit !important; }
我的情况下，任何人都有兴趣在层次结构中，我可以刮下使用Firebug以下：
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;"> <div class="pac-item"> <span class="pac-icon pac-icon-marker"></span> <span class="pac-item-query"> <span>France</span> </div> <div>
这工作对我来说，现在我可以运行在手机上！
.pac-container { z-index: 10000 !important; width: auto !important; position: initial !important; left: 0 !important; right: 0 !important; display: block !important; } .pac-container:empty{ display: none !important; }
而这个地方！
$（ 'select'）附加（ 'PAC-容器。'）;
现在结果将显示在选定的div作为一个正常的块元素:)
因为一旦失去了重点，closures这些元素就很难了。
虽然我们知道容器具有.pac-container类，而项目具有.pac-item ，但在进一步调查API后，我发现它将CSS样式embedded到文档中。
以下是最初的内容，请使用它来更改预定义的样式以适应您的需求。
.pac-container { background-color: #fff; position: absolute!important; z-index: 1000; border-radius: 2px; border-top: 1px solid #d9d9d9; font-family: Arial, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden
}
.pac-logo:after { content: ""; padding: 1px 1px 1px 0; height: 16px; text-align: right; display: block; background-image: url(https://maps.gstatic.com/mapfiles/api-3http://img.dovov.compowered-by-google-on-white3.png); background-position: right; background-repeat: no-repeat; background-size: 120px 14px } .hdpi.pac-logo:after { background-image: url(https://maps.gstatic.com/mapfiles/api-3http://img.dovov.compowered-by-google-on-white3_hdpi.png) } .pac-item { cursor: default; padding: 0 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 30px; text-align: left; border-top: 1px solid #e6e6e6; font-size: 11px; color: #999 } .pac-item:hover { background-color: #fafafa } .pac-item-selected, .pac-item-selected:hover { background-color: #ebf2fe } .pac-matched { font-weight: 700 } .pac-item-query { font-size: 13px; padding-right: 3px; color: #000 } .pac-icon { width: 15px; height: 20px; margin-right: 7px; margin-top: 6px; display: inline-block; vertical-align: top; background-image: url(https://maps.gstatic.com/mapfiles/api-3http://img.dovov.comautocomplete-icons.png); background-size: 34px } .hdpi .pac-icon { background-image: url(https://maps.gstatic.com/mapfiles/api-3http://img.dovov.comautocomplete-icons_hdpi.png) } .pac-icon-search { background-position: -1px -1px } .pac-item-selected .pac-icon-search { background-position: -18px -1px } .pac-icon-marker { background-position: -1px -161px } .pac-item-selected .pac-icon-marker { background-position: -18px -161px } .pac-placeholder { color: gray }
