I am using Mudblazor textbox and configured it for google address autocomplete.
I can see a list of address shown in a list but when I select any address with mouse click, the selected address does not show in the text box.
<code><h3>SearchByAddress</h3>
<script type="text/javascript">
var desiredSource = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDSIA-QfGYwcXFDm1ltw9M8jX6D39bhDdE&libraries=places&callback=initAutocomplete';
var scripts = document.getElementsByTagName('script');
for (var scriptIndex in document.scripts) {
if (desiredSource === scripts[scriptIndex].src) {
document.head.removeChild(scripts[scriptIndex]);
break;
}
}
var scriptTag = document.createElement('script');
scriptTag.src = desiredSource;
document.head.appendChild(scriptTag);
var autocomplete;
function initAutocomplete() {
debugger;
var element = document.getElementById("addressAutocomplete");
autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
}
</code>
<code><h3>SearchByAddress</h3>
<script type="text/javascript">
var desiredSource = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDSIA-QfGYwcXFDm1ltw9M8jX6D39bhDdE&libraries=places&callback=initAutocomplete';
var scripts = document.getElementsByTagName('script');
for (var scriptIndex in document.scripts) {
if (desiredSource === scripts[scriptIndex].src) {
document.head.removeChild(scripts[scriptIndex]);
break;
}
}
var scriptTag = document.createElement('script');
scriptTag.src = desiredSource;
document.head.appendChild(scriptTag);
var autocomplete;
function initAutocomplete() {
debugger;
var element = document.getElementById("addressAutocomplete");
autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
}
</code>
<h3>SearchByAddress</h3>
<script type="text/javascript">
var desiredSource = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDSIA-QfGYwcXFDm1ltw9M8jX6D39bhDdE&libraries=places&callback=initAutocomplete';
var scripts = document.getElementsByTagName('script');
for (var scriptIndex in document.scripts) {
if (desiredSource === scripts[scriptIndex].src) {
document.head.removeChild(scripts[scriptIndex]);
break;
}
}
var scriptTag = document.createElement('script');
scriptTag.src = desiredSource;
document.head.appendChild(scriptTag);
var autocomplete;
function initAutocomplete() {
debugger;
var element = document.getElementById("addressAutocomplete");
autocomplete = new google.maps.places.Autocomplete(element, { types: ['geocode'] });
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
}
for example, I typed 123, I get a list of addresses
but when I select an address with mouse click, it does not show that address selected.
Works fine with key board selection and also works fine If I replace Blazor textbox with an html input type=button.