Как оформить раскрывающийся список в API автозаполнения Google Адресов?

Question

Нам нужно настроить стиль раскрывающегося списка, в котором отображаются подсказки автозаполнения при использовании API автозаполнения Google Адресов и Карт.

Кто-нибудь знает, возможно ли это?Если это так, я думаю, нам просто нужно знать имена / идентификаторы классов CSS.

Здесь есть фрагмент экрана, на который я ссылаюсь:

">

Answer 1

Это теперь задокументировано Google: https://google -developers.appspot.com / maps / Documentation / javascript / place-autocomplete # style_autocomplete

Answer 2

Если вы используете firebug (как упомянуто в комментарии к вашему вопросу ...), вы видите, что контейнер с результатами автозаполнения является DIV с классом "pac-container", и предложения находятся внутри него как DIV скласс "pac-item".так что просто стиль с CSS.

Answer 3

Этот CSS позволит изменить размер раскрывающегося списка в соответствии с шириной результатов:

.pac-container, .pac-item {
    width: inherit !important;
}

Answer 4

В случае, если кто-то заинтересован в иерархии, я смог почистить следующее, используя 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>
        </span>
    </div>
<div>

Answer 5

Это сработало для меня, и теперь я могу запустить это на мобильном телефоне!

.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;
}

И это где-то!

$ ('селектор'). Append ('. Pac-container');

Теперь результаты будут отображаться в выбранном элементе div как обычный элемент блока:)

Answer 6

Довольно сложно проверить элементы, так как они закрываются, как только теряют фокус.

Хотя мы знаем, что контейнер имеет класс .pac-container, а элементы имеют .pac-item, после дальнейшего изучения API я обнаружил, что он встраивает стили CSS в документ.

Вот что изначально есть, поэтому используйте его для изменения предопределенных стилей в соответствии с вашими потребностями.

.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-3/images/powered-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-3/images/powered-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-3/images/autocomplete-icons.png);
    background-size: 34px
}
.hdpi .pac-icon {
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-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
}