I'm trying to work out how to set the value of a text field called rehabGroup when I do an search for an address.
The autocomplete form I'm using consists of 2 maps.
I need to take the value from the locality returned result and use it to search through a list of names to return the result to a text field.
I can do it with an autocomplete search but I really need it to do it automatically when the result from the search is selected.
This is a snippet of the HTML
<div id="map2"></div>
<div class="form-group">
<label class="control-label" for="autocomplete2">Search for Encounter Address</label>
<i class="h5 fas fa-map-pin"></i>
<div class="input-group">
<input id="autocomplete2" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="locality">Town/Suburb</label>
<i class="h5 far fa-map"></i>
<div class="input-group">
<input type="text" class=" form-control rounded" id="locality2" name="locality2" placeholder="Town of the rescue" data-toggle="tooltip" title="Town of rescue" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="rehabGroup">Rehab Group</label>
<i class="h5 fas fa-map-pin"></i>
<div class="input-group">
<input type="text" id="rehabGroup" name="rehabGroup" value="" />
</div>
</div>
This is the code i've been using
<script>
$(function() {
$('#locality2').autocomplete({
source: 'ajax.php',
minLength: 3,
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
$(this).focus();
}
},
select: function(event, ui) {
$('#rehabGroup').val(ui.item.rehabGroup);
}
});
});
let placeSearch, autocomplete, autocomplete2;
let componentForm = {
subpremise: 'long_name',
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
administrative_area_level_2: 'long_name',
country: 'long_name',
postal_code: 'short_name',
latitude: 'long_name',
longitude: 'short_name'
};
let defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-32.889049, 151.600815),
new google.maps.LatLng(-32.506633, 152.340289)
);
let map1 = new google.maps.Map(document.getElementById('map1'), {
center: {
lat: -32.732140,
lng: 152.039616
},
zoom: 11
});
let map2 = new google.maps.Map(document.getElementById('map2'), {
center: {
lat: -32.732140,
lng: 152.039616
},
zoom: 11
});
let marker1 = new google.maps.Marker({
map: map1,
draggable: true
});
let marker2 = new google.maps.Marker({
map: map2,
draggable: true
});
google.maps.event.addListener(marker1, 'dragend',
function(marker1) {
let latLng1 = marker1.latLng;
currentLatitude1 = latLng1.lat();
currentLongitude1 = latLng1.lng();
$('#lat').val((currentLatitude1).toFixed(6));
$('#lng').val((currentLongitude1).toFixed(6));
}
);
google.maps.event.addListener(marker2, 'dragend',
function(marker2) {
let latLng2 = marker2.latLng;
currentLatitude2 = latLng2.lat();
currentLongitude2 = latLng2.lng();
$('#lat2').val((currentLatitude2).toFixed(6));
$('#lng2').val((currentLongitude2).toFixed(6));
}
);
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
bounds: defaultBounds,
types: [
'geocode'
],
strictBounds: true,
componentRestrictions: {
country: 'au'
}
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', function() {
fillInAddress(autocomplete, '');
});
autocomplete2 = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete2')), {
bounds: defaultBounds,
types: [
'geocode'
],
strictBounds: true,
componentRestrictions: {
country: 'au'
}
});
autocomplete2.addListener('place_changed', function() {
fillInAddress(autocomplete2, '2');
});
}
function fillInAddress(autocomplete, unique) {
// Get the place details from the autocomplete object.
let place = autocomplete.getPlace();
if (unique === '2'){
if (place.geometry.viewport) {
map2.fitBounds(place.geometry.viewport);
} else {
map2.setCenter(place.geometry.location);
map2.setZoom(14);
}
marker2.setPosition(place.geometry.location);
marker2.setVisible(true);
}else{
if (place.geometry.viewport) {
map1.fitBounds(place.geometry.viewport);
} else {
map1.setCenter(place.geometry.location);
map1.setZoom(14);
}
marker1.setPosition(place.geometry.location);
marker1.setVisible(true);
}
for (let component in componentForm) {
if (!!document.getElementById(component + unique)) {
document.getElementById(component + unique).value = '';
document.getElementById(component + unique).disabled = false;
}
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (let i = 0; i < place.address_components.length; i++) {
let addy = '';
let addressTypes = place.address_components[i].types;
for (let j = 0; j < addressTypes.length; j++) {
let addressType = addressTypes[j];
if (componentForm[addressType] && document.getElementById(addressType + unique)) {
addy = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType + unique).value = addy;
}
}
}
document.getElementById('lat' + unique).value = place.geometry.location.lat().toFixed(6);
document.getElementById('lng' + unique).value = place.geometry.location.lng().toFixed(6);
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
</script>
TIA
