Setting value for autocomplete search field linked to Google Places API
Posted
by
user1653350
on Stack Overflow
See other posts from Stack Overflow
or by user1653350
Published on 2012-09-09T04:52:36Z
Indexed on
2012/09/12
21:38 UTC
Read the original article
Hit count: 339
JavaScript
|google-places-api
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(); });
//]]>
© Stack Overflow or respective owner