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: 287

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

Related posts about JavaScript

Related posts about google-places-api