score:3
Accepted answer
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>
Source: stackoverflow.com
Related Query
- google autocomplete setComponentRestrictions
- Using Google Place Autocomplete API in React
- Material-ui - Google autocomplete address
- Material-UI Autocomplete & TextField triggers google autocomplete
- Google places autocomplete inside a react component
- Google Places Autocomplete along with google maps - load issue
- React Google Maps API Autocomplete suggestions are behind the Dialog
- Google places autocomplete in react, don't display full address in places input
- Google Places autocomplete not working (in Bootstrap modal)
- Material UI - Google Maps Autocomplete - Restrict to city and state?
- getPlace function not working with Google Autocomplete in react
- How to create Google Autocomplete in Material UI Dialog
- How to limit Google Maps Places Autocomplete API results to cities?
- Google Places API Autocomplete Not Showing Results
- ReactJS not updating state google map autocomplete fields
- How to test material ui autocomplete google map with react testing library
- React - Google Maps Autocomplete recenter without selection
- Why does google places autocomplete return an empty status and no data?
- Cypress with react and google API services - how to stub autocomplete
- Disable Google Chrome address autocomplete in a Formik Field - ReactJs
- StopPropagation react google maps autocomplete
- How to use Google fonts in React.js?
- React doesn't render autocomplete off
- How to set up Google Analytics for React-Router?
- How to use google analytics with next.js app?
- Adding Google Analytics to React
- Getting the value in the React material-UI Autocomplete
- Autocomplete html tags in jsx (sublime text)
- How do I add google fonts to a gatsby site
- Handle change on Autocomplete Component from material ui
More Query from same tag
- React Router Dom : Warning: Received `true` for a non-boolean attribute `exact`
- "unexpected token import" error while running tests
- Incorrect rendering of controlled Fluent UI Checkbox components
- How to pass AJAX data to child through props
- React-Bootstrap: manually calling a React.PropTypes validation function
- what is this when binding to click event
- TypeScript error: (component with MUI style) cannot be used as a JSX element
- Is it possible to prevent moving the cursor to the start of an input field when type changes?
- Why it is must to import "react" even if my client.js is not using it
- Environment Variables in .NET Core React SPA
- import returns undefined instead of react component while testing
- How to access a JSON static file imported with Webpack?
- How to redirect to a class component from another class component in reactjs
- CucumberJs : unable to find step definition file
- Function doesn't enter in the dispatch in React / Redux
- AntDesign and React issue
- material-ui and react does not reproduce same behavior after `npm run build`?
- How to manipulate fetch response for single object JSON in react-native
- How to setState in react dynamically using map function?
- Add Popup to React Heatmap Grid
- React TypeScript 16.8 How to make useEffect() async
- Undefined props from Firebase
- Redux:Changing the value in store does not trigger my another component using the same value
- How to run effect depending on if a value increases or decreases in React?
- React - how to populate one select menu based on a value of another select menu using data from a local .json file
- How to Set Rows in React-Bootstrap Correctly?
- Pass to this.state my rows and their json schema
- React- Destruct State error in Typescript
- Compare values ​from two arrays and generate a new one
- How do I display Images in React from a Django Rest API?