How to get complete address? about ember-place-autocomplete

[dmuneras]

Hi @Aathi

First Question

I have found three ways to get the full address:

• If you only want to display the full address you can fetch the adr_address attribute from the place object you receive in the callback function and print the value using {{{ }}} in your template.
• If you have a variable bound to the ember-autocomplete field, that attribute will have the complete address after Google autocomplete fill the field. (the variable you pass in the value option).
• The other option is fetch the adr_address attribute and remove the HTML part of the string

CONTROLLER

export default Ember.Controller.extend({

  fullAddress: null,

  actions:{
    done: function(){
      Ember.$('#message').fadeOut(500, () => {
        this.set('message', 'Focus out');
      }).fadeIn(500);
    },
    placeChanged: function(place){
      this.set('placeJSON', JSON.stringify(place, undefined, 2));
      if (place.adr_address) {
        let regexp = /(<span(?: \w+="[^"]+")*(?: \w+="[^"]+")*>([^<]*)<\/span>)/g,
            fullAddress = place.adr_address.replace(regexp, "$2");
        this.set('cleanFullAddress', fullAddress);
      }
      this.set('fullAddress', place.adr_address);

    },
    placeChangedSecondInput: function(place){
      this.set('placeJSONSecondInput', JSON.stringify(place, undefined, 2));
    }
  }
});

TEMPLATE

<p id="message">Message: {{message}}</p>
<p>Full adddress from JSON sent to the callback: {{{fullAddress}}}</p>
<p>Clean string: {{cleanFullAddress}}</p>
<p> Model address: {{model.address}}</p>
<div class="test-place-autocomplete-container">
  {{place-autocomplete-field
    value= model.address
    handlerController= this
    inputClass= 'place-autocomplete--input'
    focusOutCallback="done"
    placeChangedCallback="placeChanged"
  }}
</div>
<pre style="font-size: 6px;">
  {{placeJSON}}
</pre>

<h2>Automcomplete 2</h2>
<div class="test-place-autocomplete-container">
  {{place-autocomplete-field
    value= model.address2
    handlerController= this
    inputClass= 'place-autocomplete--input-2'
    inputId='place-autocomplete--input-2'
    placeChangedCallback="placeChangedSecondInput"
    types='(cities)'
    restrictions=restrictions
  }}
</div>
<pre style="font-size: 6px;">
  {{placeJSONSecondInput}}
</pre>
{{outlet}}

Second question

It was not implemented, but I just create a branch with that option and we will merge it soon.

If you have any question or this was not useful feel free to reply and I will be glad to answer again,
Daniel.