Address "input" field like algolia/places?

[spekulatius]

Hello,

I have been looking for a vue component like this https://github.com/algolia/places ? Is there a input field with a similar auto-fill functionality for addresses?

Topic also discussed at: https://www.reddit.com/r/vuejs/comments/4t2ne4/is_there_a_vue_component_similar_to_algoliaplaces/

Cheers, spek

[LinusBorg]

Wrapping algolia-places takes just a couple of lines of code. The following is untested (15min work), but may be a nice starting point (uses Vue 2.0.0 syntax already)

<script>
  import places from 'places'

  const Events = ['suggestions','cursorchanged', 'clear', 'limit', 'error']

  export default {
    props: {
      options: {
        type: Object,
        default: {},
      }
      value: String,
    },
    mounted() {

      this.$nextTick(function () {
        // put together options
        const options = Object.assign({}, this.options, {container: this.$refs.input})

        // create algolia-places instance and save it as a prop
        this.place = places(options)

        // create closure for event callbacks
        const self = this

        // create event callbacks for all algolia-places events
        Events.each(function(eventName) {

          self.place.on(eventName, function(event) {

            self.$emit(eventName, event)

          })

        })

      })
    },
    beforeDestroy() {
      // clean up so event bindings get removed etc.
      this.place.destroy()
    }
  }
</script>

<template>
  <input type="search" :value="value" ref="input" placeholder="Where are we going?">
</template>

Usage:

<algolia-place 
  v-bind:value="dataPropWithPlaceString" 
  v-bind:options="{...}"
  v-on:change="callHandlerMethod"></algolia-place>

[spekulatius]

Hello @LinusBorg

thanks for showing me how simple this actually could be approached. It seems like im not deep enough into Vue to build it that quick yet :/

I'll try this out and let know how it went :)

Cheers, Peter

[LinusBorg]

FYI, I updated 2 mistakes - an empty field in the Events array, and old 1.0 syntax v-ref:input instead of 2.0 syntax ref="input" in the template.

[spekulatius]

Ah okay, cool. Thank you :)