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

Pirn

have you checked vue-strap yuche.github.io/vue-strap? – Sleet

@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!!) – Pirn

@NiketPathak this was asked 2 years ago. I'm not working on this any more! :) – Pirn

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

Drummond

Please provide a code example. – Forbore

@Forbore example added. – Drummond

@Drummond can you help with this question #50158821 ? – Samarskite

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. – Somnambulate

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

Whereof

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! – Pirn

vue-strap typeahead – Pirn

I'm currently working with this: github.com/trionfo1993/vue2-typeahead – Denary

Answer 3

Try wffranco's fork of vue-strap. It aims to support Vue.js 2.x.x. I tested the recent version from master (build 2.0.0-pre.11) and it works: https://jsfiddle.net/LukaszWiktor/kzadgqv9/

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">

<div id="app">
    <typeahead v-model="value" v-bind:data="options"></typeahead>
</div>

<script src="libs/vue/vue.js"></script>
<script src="libs/vue-strap/vue-strap.js"></script>
<script>
    Vue.component("typeahead", VueStrap.typeahead);

    var app = new Vue({
      el: "#app",
      data: {
        value: null,
        options: ["foo", "bar", "baz"]
      }
    })
</script>

Subscapular

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..}] – Diageotropism