javascript - google autocomplete setComponentRestrictions - Stack Overflow

admin管理员组

文章数量:1410705

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)'],ponentRestrictions: {country: 'us' }};
var autoComplete = new google.maps.places.Autoplete(cityInput,options);`

Scenario 2 (Not working)

In this, I have another text field which I am using to find country using autplete 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)'], ponentRestrictions: {country: countryOpt }};
var autoComplete = new google.maps.places.Autoplete(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.

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)'],ponentRestrictions: {country: 'us' }};
var autoComplete = new google.maps.places.Autoplete(cityInput,options);`

Scenario 2 (Not working)

In this, I have another text field which I am using to find country using autplete 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)'], ponentRestrictions: {country: countryOpt }};
var autoComplete = new google.maps.places.Autoplete(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.

• javascript
• google-maps-api-3
• reactjs

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Oct 30, 2015 at 23:10 Kumaresan ChinnarajKumaresan Chinnaraj 7611 gold badge11 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

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.Autoplete(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./maps/api/js?v=3&libraries=places"></script>

本文标签： javascriptgoogle autocomplete setComponentRestrictionsStack Overflow