google autocomplete setComponentRestrictions

Question

Is there any restriction on setting the setComponentRestrictions value ? Because it is not working while setting dynamic values.

Scenario 1 (Works fine)

In this scenario I hard coded the county value to search only specific cities in that country.So this works fine when I use hard coded value.

var input = document.getElementById('searchCity');
var options = { types: ['(cities)'],componentRestrictions: {country: 'us' }};
var autoComplete = new google.maps.places.Autocomplete(cityInput,options);`

Scenario 2 (Not working)

In this, I have another text field which I am using to find country using autcomplete and storing the short_code value in shortNameCountry Id.But this is not working when I am passing dynamic value.

var input = document.getElementById('searchCity');
var countryOpt = $("#shortNameCountry").val().toLowerCase();
var options = {types: ['(cities)'], componentRestrictions: {country: countryOpt }};
var autoComplete = new google.maps.places.Autocomplete(input,options);

(I have added my scenarios. But I dont know stackoverflow keep on ask me to add more details. I am just writting this lines to solve that alert.) Please help me to solve this issue.

Answer 1

Currently your code uses the property componentRestrictions, which will have the value of the input when you create the autocomplete.

To change this property you must call the method setComponentRestrictions when the value of the input changes.

function initialize() {

        var iso           = ['AD','AE','AF','AG','AI','AL','AM','AO','AQ','AR','AS','AT','AU','AW','AX','AZ','BA','BB','BD','BE','BF','BG','BH','BI','BJ','BL','BM','BN','BO','BQ','BR','BS','BT','BV','BW','BY','BZ','CA','CC','CD','CF','CG','CH','CI','CK','CL','CM','CN','CO','CR','CU','CV','CW','CX','CY','CZ','DE','DJ','DK','DM','DO','DZ','EC','EE','EG','EH','ER','ES','ET','FI','FJ','FK','FM','FO','FR','GA','GB','GD','GE','GF','GG','GH','GI','GL','GM','GN','GP','GQ','GR','GS','GT','GU','GW','GY','HK','HM','HN','HR','HT','HU','ID','IE','IL','IM','IN','IO','IQ','IR','IS','IT','JE','JM','JO','JP','KE','KG','KH','KI','KM','KN','KP','KR','KW','KY','KZ','LA','LB','LC','LI','LK','LR','LS','LT','LU','LV','LY','MA','MC','MD','ME','MF','MG','MH','MK','ML','MM','MN','MO','MP','MQ','MR','MS','MT','MU','MV','MW','MX','MY','MZ','NA','NC','NE','NF','NG','NI','NL','NO','NP','NR','NU','NZ','OM','PA','PE','PF','PG','PH','PK','PL','PM','PN','PR','PS','PT','PW','PY','QA','RE','RO','RS','RU','RW','SA','SB','SC','SD','SE','SG','SH','SI','SJ','SK','SL','SM','SN','SO','SR','SS','ST','SV','SX','SY','SZ','TC','TD','TF','TG','TH','TJ','TK','TL','TM','TN','TO','TR','TT','TV','TW','TZ','UA','UG','UM','US','UY','UZ','VA','VC','VE','VG','VI','VN','VU','WF','WS','YE','YT','ZA','ZM','ZW'];
            goo           =  google.maps,
            input         = document.getElementById('searchCity'),
            country       = document.getElementById('shortNameCountry'),
            options       = {types: ['(cities)']},
            autoComplete  = new google.maps.places.Autocomplete(input,options);
        
        goo.event.addDomListener(country,'input',function(){
          var val=this.value.trim().toUpperCase();
          if(iso.indexOf(val)>-1){
            this.style.background='white';
            input.value=' ';
            autoComplete
            .setComponentRestrictions({country:val});
            
          }
          else{
            this.style.background='red';
          }
        });
        goo.event.trigger(country,'input');
        
      }

      google.maps.event.addDomListener(window, 'load', initialize);

<input id="searchCity"/>
  <input id="shortNameCountry" size="2" maxlength="2" value="de"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>