Simple typeahead Vue component for handling local arrays.

SimpleTypeahead.vue

<template>
  <input
    :id='unique_typeahead_id'
    class='typeahead'
    type='text'
  >
</template>


<script>
import Bloodhound from 'corejs-typeahead'
import $ from 'jquery'

export default {
  name: 'SimpleTypeahead',

  props: {
    data: {
      type: Array,
      required: true,
    },
    unique_typeahead_id: {
      type: String,
      required: true,
    },
    value: String,
  },

  mounted: function() {
    this.typeahead_selector = `#${this.unique_typeahead_id}`
    this.setupTypeahead()
  },

  methods: {
    handleValueSelection: function(event, selected) {
      console.log('[handleValueSelection]', {event, selected})
      this.$emit('input', selected)
    },

    setupTypeahead: function() {
      console.log('[setupSimpleTypeahead]')

      const bloodhound = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: this.data
      })
      $(this.typeahead_selector).typeahead(
        {
          hint: true,
          highlight: true,
          minLength: 1
        },
        {
          name: this.unique_typeahead_id,
          source: bloodhound,
        }
      )
      $(this.typeahead_selector).on(
        'typeahead:select',
        this.handleValueSelection
      )
    },
  }
}
</script>