gistfile1.txt

<template lang="pug">
div(v-bem)
  input.input(
    :name='name',
    :placeholder='placeholder',
    v-model='input',
    @focus="focus"
    @blur="reset"
    @keydown='query | debounce 100'
    @keydown.down.prevent.stop="selection"
    @keydown.up.prevent.stop="selection"
    @keydown.enter="setChosen"
    @keydown.tab="setChosen"
  )
  div(v-bem, element='results', v-if="visible")
    div(
      v-bem,
      element='item',
      v-for="item in results",
      :class="{'is-selected': $index == selected}"
      @mousedown="setChosen"
      @mousemove="select($index)"
    ) {{{ highlight(item.description, item.matched_substrings) }}}

</template>

<script>
import _ from 'lodash'
import api from '../../services/api'
export default {
  props: {
    placeholder: String,
    name: String
  },
  data () {
    return {
      input: null,
      results: [],
      selected: -1,
      chosen: null,
      visible: false
    }
  },
  methods: {
    highlight (label, substrings) {
      let replace = []
      substrings.forEach(s => {
        replace.push(label.substr(s.offset, s.length))
      })

      replace.forEach(r => {
        label = _.replace(label, r, `<strong>${r}</strong>`)
      })
      return label
    },

    selection (event) {
      if(event.key === 'ArrowUp' && this.selected > 0) {
        this.selected--
      }
      if(event.key === 'ArrowDown' && this.selected < this.results.length - 1) {
        this.selected++
      }
    },

    focus (event) {
      event.target.select()
    },

    reset () {
      this.visible = false
      this.select(-1)
      if(!this.chosen) {
        this.input = null
      }
    },

    showChoices () {
      this.visible = true
      this.chosen = null
    },

    setChosen (event) {
      this.chosen = this.results[this.selected]
      this.input = this.chosen.description
      this.reset()
    },

    select (index) {
      this.selected = index
    },

    query (event) {
      if ( event.which === 8 || _.inRange(event.which, 48, 90) ) {
        if(this.input.length < 3) return
        api.places.search(this.input)
                  .then((response)=>{
                    this.results = response.data.data
                    this.showChoices()
                  })
                  .catch((response)=> {
                    this.visible = false
                    this.$store.commit('NOTIFICATION_ADD', {
                      message:'Whoops, looks like something went wrong, we need you to try again.',
                      class:'basic'
                    })
                    console.warn(response)
                  })
      }
    }
  }
}
</script>

<style lang="stylus">
@import '../../styl/common'

+c(google-places-autocomplete)
  position: relative

  +e(results)
    position: absolute
    width: 100%
    margin-top: -3px
    border: 1px solid #1fc8db
    border-top-color: rgba(0, 0, 0, 0.21)
    background-color: colours.white
    z-index: control

  +e(item)
    font-size: 12px;
    padding: 6px 8px;
    border-bottom: 1px solid alpha(colours.black, .2);

    +i(selected)
      background: alpha(#1fc8db, .1)
</style>