Autcomplete Usage

[ChristopherJohnson25]

Has anyone used the autocomplete component as a standard autocomplete (with dropdown and no map?). There's not much in the docs about how to integrate the autocomplete, so looking for a few examples. Thanks!

[sandydoo]

The autocomplete component is set up to be used with a map. Perhaps we could make a standalone autocomplete and then reuse that in the map version.

For now, you could create your own component. Fetching google from the googleMapsApi service returns a promise that resolves with the google global after the API has initialized. The whole thing would look something like this (not tested):

my-autocomplete.js

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { reads } from '@ember/object/computed';

export default Component.extend({
  googleMapsApi: service(),
  google: reads('googleMapsApi.google'),

  didInsertElement() {
    this._super(...arguments);

    this.get('google').then(google => {
      if (this.isDestroyed) { return; }

      let inputElement = this.element.querySelector('input');
      let options = {};
      let autocomplete = new google.maps.places.Autocomplete(inputElement, options);
      //...
    });
  }
});

my-autocomplete.hbs

<input>

[ChristopherJohnson25]

Fantastic, thank you!!