Typeahead with Vue.js 2.0

Ian Grainger picture Ian Grainger · Oct 26, 2016 · Viewed 15.7k times · Source

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

wxsm picture wxsm · Nov 25, 2017

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 -->