Typeahead with Vue.js 2.0

16,086

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

Solution 2

Check out this component:

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

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

https://vuecomponents.com

Share:
16,086

Related videos on Youtube

Auguste Van Nieuwenhuyzen
Author by

Auguste Van Nieuwenhuyzen

.NET and JavaScript software developer and consultant in Cambridge. Into software, videogames and technology.

Updated on June 04, 2022

Comments

  • Auguste Van Nieuwenhuyzen
    Auguste Van Nieuwenhuyzen almost 2 years

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

    • Auguste Van Nieuwenhuyzen
      Auguste Van Nieuwenhuyzen over 7 years
      @flyingSmurfs yes. There's a branch moving it to Vue 2.0 (issue: github.com/yuche/vue-strap/issues/378), but the typeahead component currently in there only appears to work with Vue 1.0. (I do wish they'd make it clearer on the site! That was a waste of time finding out!!)
  • Auguste Van Nieuwenhuyzen
    Auguste Van Nieuwenhuyzen over 7 years
    Vue-typeahead is what I was referring to when I said 'terribly documented' :) I think you meant to link to: vuecomponents.com - the www site is WEIRD. And, the only other similar component on vuecomponents is 'autocomplete' - which didn't /seem/ as good as Twitter's typeahead - but I might be wrong!
  • Auguste Van Nieuwenhuyzen
    Auguste Van Nieuwenhuyzen over 7 years
    vue-strap typeahead
  • redshift
    redshift over 6 years
    Great answer. How would you set it up so instead of just an array of strings, you were using a JSON object? E.g. officeList = [{name: "abc", color: "red"}, {...snip..}]
  • Al0x
    Al0x over 6 years
    Please provide a code example.
  • wxsm
    wxsm over 6 years
    @Al0x example added.
  • Aakash
    Aakash almost 6 years
    I'm currently working with this: github.com/trionfo1993/vue2-typeahead
  • Jepzen
    Jepzen almost 6 years
    @wxsm can you help with this question stackoverflow.com/questions/50158321/… ?
  • Arthur Hylton
    Arthur Hylton over 5 years
    I am new to vuejs (1 day so far). I don't understand what to do with this code and your answer keeps coming up in all my searches. Should I create my own .vue file and paste this code inside? Should I drop this code directly in my html file?... Please help me to understand.