Setting value for autocomplete search field linked to Google Places API
- by user1653350
I have a web page where people will be able to enter multiple destinations.
When they state they want to enter a new destination, the current field values are stored in arrays.
If they choose to go back to a previous destination, the relevant values are reinserted into the form fields.
I am using the search field linked to autocomplete as the visible display of the destination.
When I attempt to put a value into the linked search field, the value is presented as if it is a placeholder instead of a value. Enter the field and the value is removed by the onFocus() event of the Google Places autocomplete add-in.
How can I reinsert the value and have it recognised as a value instead of placeholder.
field definition in the form
<label for="GoogleDestSrch" class="inputText">Destination:
<span id="DestinationDisplay2">1</span>
<span class="required"><font size="5"> * </font></span></label>
<input id="GoogleDestSrch" type="text" size="50" placeholder="Please enter your destination" />
initialise code for Google Places API listener
var input = document.getElementById('GoogleDestSrch');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
attempting to reinsert value into search field when prior destination reloaded
form.GoogleDestSrch.value = GoogleDestSrch[index];
Issue With Google Places
<script language="JavaScript" type="text/javascript">
function GotoDestination(index) {
var domove = true;
if (index == 0) {
index = lastIndex + 1;
}
else {
if (index == -1) {
index = lastIndex - 1;
if (index == 0) {
index = 1;
domove = false;
}
}
}
if (domove) {
if (index != lastIndex) {
var doc = window.document;
var pdbutton = doc.getElementById("pdbutton");
var pdbutton1 = doc.getElementById("pdbutton1");
if ((index > lastIndex)) {
// move to next destination
saveDataF(lastIndex);
loadDataF(index);
lastIndex = index;
} else if (index <= lastIndex) {
// move to previous destination
saveDataF(lastIndex);
loadDataF(index);
lastIndex = index;
}
}
}
}
var input;
var autocomplete;
// fill in the Google metadata when a destination is selected
function fillInAddress() {
var strFullValue = '';
var strFullGeoValue = '';
var place = autocomplete.getPlace();
document.getElementById("GoogleType").value = place.types[0];
}
function saveDataF(index) {
var fieldValue;
var blankSearch = "Please enter"; // placeholder text for Google Places
fieldValue = document.getElementById("GoogleDestSrch").value;
if (fieldValue.indexOf(blankSearch) > -1) { fieldValue = ""; }
GoogleDestSrch[index] = fieldValue;
}
function loadDataF(index) {
if ((GoogleDestSrch[index] + "") == "undefined") {
document.getElementById("GoogleDestSrch").value = "";
} else {
document.getElementById("GoogleDestSrch").value = GoogleDestSrch[index];
}
}
// --
Destination:
1 *
Type of place
//
input = document.getElementById('GoogleDestSrch');
autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress();
});
//]]
