Google지도 자동 완성의 텍스트 상자에서 값을 변경하십시오.

Question

주소의 일부인 다른 입력 텍스트 상자에 Google지도 자동 완성을 수행하는 다음 자바 스크립트 코드가 있습니다.

function startAutoComplete() { 
    var address = document.getElementById("addressId"); 
    var city = document.getElementById("cityId"); 
    var state = document.getElementById("stateId"); 
    var zip = document.getElementById("zipId"); 

    //option for autocomplete 
    var option = {types: ['geocode'], componentRestrictions: {country: 'us'}}; 

    //autocomplete for address textbox 
    autocomplete = new google.maps.places.Autocomplete(address, option); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 

     //parses the result object and populates the other textboxes accordingly 
     for(i=0; i<place.address_components.length; i++) 
     { 
      if(place.address_components[i].types[0] == 'locality') 
      city.value = place.address_components[i].long_name; 

      if(place.address_components[i].types[0] == 'administrative_area_level_1') 
      state.value = place.address_components[i].short_name; 

      if(place.address_components[i].types[0] == 'postal_code') 
      zip.value = place.address_components[i].long_name; 
     } 

     /* Here is the PROBLEM */ 
     address.value = place.name; 

    }); 

그러나 나는 시도하고 전체 주소 (그래서 여기에 바로 길 번호와 거리 이름)의 단축 버전 완성 자동되고있는 텍스트 상자를 업데이트 할 때. 전체 주소 텍스트 상자의 값은 변경되지 않습니다. 나는 jquery를 사용하고 텍스트 상자에 setAttribute()를 사용하여 value 속성을 설정하려고 시도했다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

매우 일시적인 해결책을 발견했습니다. 의도적으로 오류를 만들면 원래 텍스트 상자에서 Google지도 자동 완성을 바인딩 해제하고 원래 텍스트 상자를 업데이트 된 값으로 나타냅니다. 별로 해결책하지만 그것은 시작이다

//Created this variable that stores the pac-container 
var element = document.getElementsByClassName("pac-container"); 

//inside the addListener() function I added this to create a DOM error 
element[0].childNodes[0].childNodes[0].removeChild(); 

자바 스크립트 오류가 발생하지만, 적어도 나에게 '.value'다시

하지 솔루션을 사용하여 텍스트 상자에 내가 원하는 넣어 수 있지만, 스타트. 우리가 더 나은 해결책을 찾기를 바랍니다.

Answer 2

요소를 복제 한 다음 동일하게 바꾸고 초기화를 다시 호출하는 방법은 무엇입니까?

글쎄요. 이것은 과거에 나를 위해 일했습니다.

$("#Id").replaceWith($("#Id").clone()); 
initialize(); 

여기 initailize DOM을로드 google.maps.event.addDomListener (창 '로드', 초기화) 때 호출되는 방법이다; 귀하의 경우에는 다를 수 있습니다

Answer 3

자동 완성 개체에는 몇 가지 명백한 이벤트 수신기가 있습니다. 현실은 코드를 실행하면 실제로 값이 변경된 다음 자동 완성 객체가 매우 빠르게 변경된다는 것입니다. 이를 테스트하려면 address.value = place.name; 행 뒤에 alert();을 추가하십시오. 값을 1ms 지연으로 설정하는 setTimeout()을 추가하면 값을 유지하는 것이 좋습니다. 하지만 필드를 나갈 때 자동 완성의 blur 이벤트가 실행되고 주소가 다시 덮어 씁니다. 당신은 하나의 선으로이 문제를 해결할 수 있습니다 : 당신은 심지어 setTimeout()을 추가 할 필요가 없습니다 있도록

는

address.addEventListener('blur', function() { address.value = place.name; });

이뿐만 아니라, 첫 번째 경우 처리한다. 값을 설정하기 위해 가지고있는 줄을이 이벤트 리스너로 바꾸면 해고 될 때마다 텍스트를 설정하는 자동 완성 콜백 함수를 대체합니다.