Typeahead with Vue.js 2.0 [closed]

Question

Total Vue noob here. Just wanted a typeahead component for Vue. Bootstrap has one, but I have no idea how to integrate the two!

And the only options I can find are either for Vue 1.x only or terribly documented (and the main effort to port Bootstrap components to Vue 2.x doesn't appear to include typeahead.)

Answer 1

I've been a user of vue-strap, and it is not maintaining for a long time... (both vue 1 version and vue 2 fork)

check this out (created by myself): https://uiv.wxsm.space/typeahead/

(A simple but elegant typeahead implementation with Vue 2 & Bootstrap 3)

Install:

$ npm install uiv --save

Example usage:

<template>
  <section>
    <label for="input">States of America:</label>
    <input id="input" class="form-control" type="text" placeholder="Type to search...">
    <typeahead v-model="model" target="#input" :data="states" item-key="name"/>
  </section>
</template>
<script>
  import {Typeahead} from 'uiv'
  import states from '../../assets/data/states.json'

  export default {
    components: {Typeahead},
    data () {
      return {
        model: '',
        states: states.data
      }
    }
  }
</script>
<!-- typeahead-example.vue -->

Answer 2

Check out this component:

https://github.com/pespantelis/vue-typeahead

Also, there is a great collection of vue components already:

https://vuecomponents.com