Использовать функцию автозаполнения адресов API Карт Google без отдельного поля

Question

Я хочу добавить функцию формы JavaScript API Google Maps Address Autocomplete в мою форму. Я следил за их example page и все работает до сих пор.

Однако мне не нравится, как в примере используется отдельное поле только для поведения автозаполнения. Я хочу привязать поведение автозаполнения к моему существующему адресу Street Address, чтобы я мог не добавлять дополнительное поле в свою форму.

По умолчанию, когда выбрано предложение автозаполнения, поле, к которому он прикреплен, заполняется полным адресом (например, 123 Main St., Anytown, CA, United States). Но поскольку я привязываю поведение автозаполнения к полю «Уличный адрес», я хочу, чтобы он показывал номер и название улицы после выбора предложения. Таким образом, я попытался установить значение поля автозаполнения, чтобы только street_number и route от ответа JSON:

if (addressType == "street_number") { 
    // Set the value to the street number 
    document.getElementById("autocomplete").value = val; /* 123 */ 
} else if (addressType == "route") { 
    // Append the street name 
    document.getElementById("autocomplete").value += " " + val; /* 123 Main St. */ 
} 

Это работает ... но только тогда, когда поле находится в фокусе. Как только он теряет фокус - например, когда вы переходите к следующему полю, он снова отображает полный адрес.

Я не могу найти ни одного события или что-либо, что я могу использовать, чтобы предотвратить повторное отображение поля при полном его отсутствии. Класс Autocomplete имеет только одно событие, place_changed, которое запускается только при выборе варианта автозаполнения.

Так что я попытался adding a DOM listener для blur события на поле, так что всякий раз, когда он теряет фокус, я могу установить его значение обратно только на адрес:

google.maps.event.addDomListener(document.getElementById("autocomplete"), "blur", function() { 
    document.getElementById("autocomplete").value = streetAddress; 
    console.log(document.getElementById("autocomplete").value); /* logs "123 Main St." 
}); 

Но даже несмотря на утверждение журнала показывает, что значение поля установлено на 123 Main St. на размытие, оно все еще отображает полный 123 Main St., Anytown, CA, United States в браузере.

Есть ли способ достичь того, что я пытаюсь сделать, или мне просто нужно прибегнуть к добавлению отдельного поля автозаполнения?

Answer 1

Решенный! Оказывается, если я просто вручную размычу поле автозаполнения на событии place_changedдо Я заполняю его адресом улицы, затем он «прилипает» и не возвращается обратно на полный адрес (даже если я ввожу и из него):

google.maps.event.addListener(autocomplete, "place_changed", function() { 
    document.getElementById("autocomplete").blur(); 
    fillInAddress(); 
}); 

---

Update: мое оригинальное решение работает в Safari и Chrome, но не IE. Чтобы получить IE, чтобы работать хорошо, я обнаружил, что я просто должен был обернуть мою fillInAddress() функцию тайм-аута:

google.maps.event.addListener(autocomplete, "place_changed", function() { 
    document.getElementById("autocomplete").blur(); 
    window.setTimeout(fillInAddress, 0); 
}); 

Я не знаю, почему это делает никакой разницы - тем более, что другие браузеры отлично без него - но установив значение 0, оно не вызывает заметной задержки.